拆解 Axios 封装，一文掌握最佳实践

2023-12-25 11:38:29

在当今快节奏的 Web 开发环境中，Axios 已成为与远程服务器交互的首选库。封装 Axios 可以简化 HTTP 请求流程，提升代码的可维护性和可复用性。然而，网上的许多封装指南存在不足之处，要么不够全面，要么未能涵盖最佳实践。本文将深入探讨封装 Axios 的最佳方法，为您提供全面的指南。

设定

第一步是安装 Axios 和您选择的类型检查器。对于 TypeScript，推荐使用 @types/axios。接下来，在您的代码中引入 Axios 并为其创建一个实例：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 10000,
});

拦截器

拦截器是封装 Axios 的关键部分。它们允许您在请求发送之前或响应返回之后执行自定义操作。例如，您可以使用拦截器来：

添加身份验证标头
转换请求和响应数据
处理错误

以下是添加请求拦截器的示例：

instance.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }

  return config;
});

错误处理

错误处理是封装 Axios 的另一个重要方面。通过使用拦截器，您可以捕获和处理 HTTP 错误以及其他异常。例如，以下拦截器将记录错误并显示用户友好的消息：

instance.interceptors.response.use(
  (response) => response,
  (error) => {
    console.error(error);
    alert('An error occurred. Please try again.');
  }
);

自定义适配器

在某些情况下，您可能需要使用自定义适配器来覆盖 Axios 的默认 HTTP 适配器。这对于诸如与自定义服务器或代理交互之类的场景很有用。以下是创建自定义适配器的示例：

const customAdapter = (config) => {
  return new Promise((resolve, reject) => {
    // Your custom logic here
  });
};

instance.defaults.adapter = customAdapter;

高级用法

除了上述基本步骤之外，封装 Axios 还有更多高级用法。例如，您可以：