Axios二次封装方案，轻松提升效率

前端

2023-10-15 00:37:22

Axios二次封装：提高开发效率和优化网络请求性能

简介

Axios是一个强大的AJAX库，为前端开发人员提供了简洁、灵活的API。但在大型项目中，使用Axios进行网络请求时会面临一些挑战，包括代码冗余、缺乏统一的错误处理以及无法控制请求超时。

Axios二次封装

为了解决这些问题，我们可以对Axios进行二次封装。这意味着创建一个自定义的Axios实例，配置扩展功能，以便在所有网络请求中使用该实例。

创建自定义Axios实例

第一步是创建自定义Axios实例：

const axiosInstance = axios.create({
  baseURL: 'http://example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

该实例配置了基础URL、超时时间和默认请求头。

配置请求和响应拦截器

接下来，配置请求和响应拦截器，以在发送请求之前和收到响应之后进行处理：

axiosInstance.interceptors.request.use((config) => {
  // 在发送请求之前执行操作
  return config;
}, (error) => {
  // 在发送请求时出错时执行操作
  return Promise.reject(error);
});

axiosInstance.interceptors.response.use((response) => {
  // 在收到响应之后执行操作
  return response;
}, (error) => {
  // 在收到响应时出错时执行操作
  return Promise.reject(error);
});

发送请求

现在可以使用自定义的Axios实例发送请求：

axiosInstance.get('/users').then((response) => {
  console.log(response.data);
}).catch((error) => {
  console.log(error);
});

Axios二次封装的优势

二次封装Axios提供以下优势：

代码复用： 将公共网络请求代码封装到自定义实例中，避免重复编写。
统一错误处理： 配置统一的错误处理机制，简化错误处理。
控制请求超时： 设置统一的请求超时时间，避免超时问题。

代码示例

配置请求拦截器，在请求中添加认证令牌：

axiosInstance.interceptors.request.use((config) => {
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return config;
}, (error) => {
  return Promise.reject(error);
});

配置响应拦截器，对API错误进行统一处理：

axiosInstance.interceptors.response.use((response) => {
  return response;
}, (error) => {
  if (error.response && error.response.status === 401) {
    // 处理未授权错误
  } else {
    // 处理其他错误
  }
  return Promise.reject(error);
});