从零打造属于自己的axios二次封装库，手把手教你如何自定义请求库

2023-09-16 08:40:48

定制化的axios：升级前端数据交互

引言

现代前端开发离不开与后端服务器的数据交互。axios作为一款优秀的请求库，以其易用性和强大功能受到前端开发者的青睐。然而，在实际项目开发中，我们常常需要对axios进行二次封装，以满足项目的特定需求。本文将详细介绍如何从零开始构建一个axios二次封装库，涵盖多种常见场景和高级特性。

如何构建一个axios二次封装库

1. 登录态管理

在许多项目中，我们需要在请求头中携带登录态信息，以保证请求的合法性。我们可以通过axios的拦截器功能，在请求发送之前，自动为请求头添加登录态信息。

// 登录态管理
const instance = axios.create({
  headers: {
    Authorization: `Bearer ${localStorage.getItem('token')}`
  }
});

instance.interceptors.request.use((config) => {
  if (!localStorage.getItem('token')) {
    window.location.reload();
  }
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return config;
});

2. 错误请求重新尝试发起

网络波动或服务器故障会导致请求失败。通过axios的拦截器，我们可以在请求失败时自动重试发起请求。

// 错误请求重新尝试发起
instance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response.status === 500 || error.response.status === 503) {
      return instance.request(error.config);
    }
    return Promise.reject(error);
  }
);

3. loading状态管理

请求过程中显示loading组件可以告知用户请求正在进行。通过axios拦截器，我们可以在请求发送前后分别显示和隐藏loading组件。

// loading状态管理
instance.interceptors.request.use((config) => {
  // loading组件显示
  NProgress.start();
  return config;
});

instance.interceptors.response.use(
  (response) => {
    // loading组件隐藏
    NProgress.done();
    return response;
  },
  (error) => {
    // loading组件隐藏
    NProgress.done();
    return Promise.reject(error);
  }
);

4. 错误处理

请求过程中难免遇到各种错误，我们需要对错误进行统一处理，以便定位和解决问题。通过axios拦截器，我们可以在请求失败时捕获错误信息并将其上报到服务器。

// 错误处理
instance.interceptors.response.use(
  (response) => response,
  (error) => {
    console.error(error.response.data);
    return Promise.reject(error);
  }
);

5. 重复请求拦截

连续点击按钮等场景可能会发出重复请求，给服务器造成不必要的压力。通过axios拦截器，我们可以检查请求是否已经发出，已发出则直接返回上一次请求的结果。

// 重复请求拦截
const pendingRequests = new Set();

instance.interceptors.request.use((config) => {
  if (pendingRequests.has(config.url)) {
    return pendingRequests.get(config.url);
  } else {
    pendingRequests.add(config.url);
    return instance.request(config).then(
      (response) => {
        pendingRequests.delete(config.url);
        return response;
      },
      (error) => {
        pendingRequests.delete(config.url);
        return Promise.reject(error);
      }
    );
  }
});

6. 取消请求

当用户取消操作时，我们需要取消正在进行的请求。通过axios的cancelToken功能，我们可以轻松实现请求取消。

// 取消请求
const cancelTokenSource = axios.CancelToken.source();

instance.get('/api/users', {
  cancelToken: cancelTokenSource.token
}).then((response) => {
  console.log(response.data);
}, (error) => {
  if (axios.isCancel(error)) {
    console.log('请求已取消');
  } else {
    console.error(error.response.data);
  }
});

cancelTokenSource.cancel('操作已被取消');

7. 多域名支持

需要向不同域名发出请求时，我们可以通过axios的create方法创建多个实例，每个实例对应一个域名。

// 多域名支持
const instance1 = axios.create({
  baseURL: 'https://example1.com'
});

const instance2 = axios.create({
  baseURL: 'https://example2.com'
});

// 向不同域名发出请求
instance1.get('/api/users').then((response) => {
  console.log(response.data);
});

instance2.get('/api/products').then((response) => {
  console.log(response.data);
});

8. 断网情况处理

用户断网时，我们需要进行特殊处理，比如显示断网提示组件。通过axios拦截器，我们可以检查请求失败是否是由于断网造成的。

// 断网情况处理
instance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response === undefined) {
      // 断网
      NProgress.done();
      alert('网络连接已断开，请检查您的网络设置');
      return Promise.reject(error);
    } else {
      return Promise.reject(error);
    }
  }
);

9. 错误信息的埋点统计

对错误信息进行埋点统计可以帮助我们定位和解决问题。通过axios拦截器，我们可以将错误信息上报到服务器。

// 错误信息的埋点统计
instance.interceptors.response.use(
  (response) => response,
  (error) => {
    console.error(error.response.data);
    axios.post('/api/errors', {
      message: error.response.data.message
    });
    return Promise.reject(error);
  }
);