学会自己封装axios，打造属于你的高效开发利器

2023-09-30 16:22:02

使用自定义 axios 封装提升你的前端开发

在现代前端开发中，与后端进行高效的通信至关重要。而 axios，一个流行的 JavaScript 网络请求库，以其简单易用的 API 而备受推崇。然而，为了满足特定的项目需求，我们经常需要对 axios 进行定制。本文将指导你完成自定义 axios 的各个步骤，让你可以轻松地根据你的需要对网络请求进行微调。

创建定制 axios 实例

第一步是创建一个新的 axios 实例。这将允许你对该特定实例应用自定义配置，同时保留原始 axios 库的默认设置。创建实例的过程很简单：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://localhost:3000/api',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

在这个例子中，我们创建了一个具有以下配置的实例：

baseURL: 这是所有请求的基准 URL。
timeout: 请求的超时时间，单位为毫秒。
headers: 请求的默认标头。

使用自定义实例

创建实例后，你就可以在你的应用程序中使用它来发送请求。这与使用原始 axios 库类似：

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

使用自定义实例的好处在于，你可以在一个地方集中管理所有与请求相关的设置。这可以让你轻松地更改配置，而无需修改你的应用程序代码。

请求和响应拦截器

为了进一步控制网络请求，axios 提供了请求和响应拦截器。拦截器是在发送请求或接收响应之前或之后执行的函数。这让你可以执行自定义操作，例如：

在请求中添加授权标头。
处理响应中的错误。
转换响应数据。

要使用拦截器，请使用以下语法：

instance.interceptors.request.use((config) => {
  // 在发送请求之前执行的代码
  return config;
}, (error) => {
  // 处理请求错误
  return Promise.reject(error);
});

你可以根据需要添加多个拦截器。

拦截器示例

下面是一个拦截器的示例，它在发送每个请求之前添加一个授权标头：

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