手把手教你封装一个axios 基础篇：轻松玩转网络请求

前端

2023-10-05 17:54:38

使用 TypeScript 封装一个自定义 axios 库

创建 axios 实例

第一步是创建 axios 实例。这是将所有网络请求配置的中心点，例如基本 URL、超时和标头。您可以根据需要自定义此配置以满足特定应用程序的需求。

定义请求方法

接下来，定义各种 HTTP 请求方法，例如 get、post、put 和 delete。这些方法将作为封装后的库的公共 API，允许您向服务器发送请求。

添加类型注解

为了提高代码的可维护性和可读性，给请求方法添加类型注解非常重要。这将帮助您捕获错误，并确切地知道每个方法返回什么。

封装的好处

使用面向对象思想来封装网络请求具有许多好处，包括：

可维护性增强： 封装使您更容易管理和维护代码。
可读性提高： 通过将网络请求逻辑封装到一个地方，代码变得更加可读和易于理解。
代码重用性： 封装允许您在不同的项目中重用代码，从而节省时间和精力。

使用自定义库

创建自定义 axios 库后，您可以像使用原生 axios 库一样使用它。只需调用请求方法（如 get、post、put 或 delete），并传入适当的参数。

示例

// 创建 axios 实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// 定义请求方法
const request = <T>(options: RequestOptions): Promise<Response<T>> => {
  return instance(options);
};

const get = (url: string, params?: any) => {
  return request({
    url,
    method: 'get',
    params,
  });
};

const post = (url: string, data?: any) => {
  return request({
    url,
    method: 'post',
    data,
  });
};

const put = (url: string, data?: any) => {
  return request({
    url,
    method: 'put',
    data,
  });
};

const del = (url: string, params?: any) => {
  return request({
    url,
    method: 'delete',
    params,
  });
};

// 使用自定义库
get('/users')
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.error(err);
  });

post('/users', { name: 'John Doe' })
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.error(err);
  });