优化你的 JavaScript 项目：Axios request 封装指南

在开发中，为了提高效率，通常对 Axios 进行封装，简化了请求的发送和对响应的处理。同时，统一错误处理机制有助于维护代码的清晰和一致性。本文介绍了一些高效封装 Axios 请求的方法。

alt

封装理念

通过创建一个请求函数，我们可以隐藏 Axios 的直接调用，将请求的配置作为参数传入。成功的请求会解析（resolve）返回数据，失败的请求则拒绝（reject）并返回错误信息。promise 的使用使得处理这些行为变得异常便利。

封装基础请求如下所示:

1function request(options) {
2  return new Promise((resolve, reject) => {
3    axios(options)
4      .then(response => {
5        resolve(response.data);
6      })
7      .catch(error => {
8        reject(error);
9      });
10  });
11}

进一步，封装常用的 get 和 post 请求方法:

1function get(endpoint, query) {
2  return request({
3    method: 'get',
4    url: endpoint,
5    params: query
6  });
7}
8
9function post(endpoint, payload) {
10  return request({
11    method: 'post',
12    url: endpoint,
13    data: payload
14  });
15}

现在，在代码中直接利用 get 或 post 函数即可发起请求。

精简重复代码

通用设置，如 baseURL，应当被提取，避免每次请求重复声明。

1function request(options) {
2  let axiosInstance = axios.create({
3    baseURL: 'https://your-api-domain.com/api/',
4    timeout: 10000
5  });
6
7  // 应用实例配置
8  options = Object.assign({}, options, { axiosInstance });
9
10  return new Promise((resolve, reject) => {
11    axiosInstance(options)
12      .then(response => {
13        resolve(response.data);
14      })
15      .catch(error => {
16        reject(error);
17      });
18  });
19}

如此一来，简化了通用配置的过程。

拦截器的应用

拦截器是 Axios 的重要特性，使得对请求和响应的修改变得简洁。

1// 添加请求拦截器
2axiosInstance.interceptors.request.use(
3  config => {
4    // 修改请求之前的配置
5    return config;
6  },
7  error => {
8    // 请求错误的处理逻辑
9    return Promise.reject(error);
10  }
11);
12
13// 添加响应拦截器
14axiosInstance.interceptors.response.use(
15  response => {
16    // 统一处理响应数据
17    return response;
18  },
19  error => {
20    // 统一处理响应错误
21    return Promise.reject(error);
22  }
23);

错误的统一管理

利用 .catch 捕捉整个请求流程中可能出现的异常，简化了错误处理逻辑。

1function request(options) {
2  // ...
3}
4
5request(options)
6  .then(data => {
7    // 处理请求成功的数据
8  })
9  .catch(error => {
10    // 统一处理请求异常
11  });

请求的取消

在需要中断请求时, Axios 的取消令牌（cancel token）提供了便利。

1const CancelToken = axios.CancelToken;
2const source = CancelToken.source();
3
4request({
5  // 其他配置...
6  cancelToken: source.token
7});
8
9// 如需取消请求
10source.cancel('Operation canceled by the user.');

使用示例

以下是一个调用实例，演示了封装函数的使用方法:

1import { get, post } from './request';
2
3get('/user', { id: '12345' })
4  .then(response => {
5    console.log(response);
6  })
7  .catch(error => {
8    console.error(error);
9  });
10
11post('/user', { name: 'Jane' })
12  .then(response => {
13    console.log(response);
14  })
15  .catch(error => {
16    console.error(error);
17  });

通过这些方法，你可以轻松实现请求的发起和结果的处理。

实用提示

把 Axios 封装进一个可配置的 request 方法
将基础配置如 baseURL 提取出来
利用拦截器优化请求与响应的处理
通过 .catch 异常处理简化错误处理
支持请求的取消

结束语

对 Axios 进行恰当的封装能够大幅提升开发效率，减少重复代码，并且集中处理错误，以上提到的封装策略都是常见的实践，依据具体情况灵活调整。

知识扩展：

参考：

Axios中文文档：https://www.kancloud.cn/yunye/axios/234845