前端神器axios！搞懂封装套路，做个潮流前端er！

2023-07-25 07:23:34

在前端开发中，Axios 是一个非常流行的 HTTP 客户端，用于发送请求和处理响应。为了提高代码的可复用性和可维护性，封装 Axios 是一个非常好的实践。本文将探讨如何使用高阶函数和 axios-middleware 两种方法来封装 Axios，提升代码的复用性。

使用高阶函数实现封装

高阶函数作为一类特殊的函数，能够接收函数作为参数，或是返回函数。利用这一特性，我们可通过高阶函数来封装 Axios，实现代码的复用。

创建高阶函数

首先，我们创建一个高阶函数 createAxiosInstance 来创建 Axios 实例：

// 创建一个高阶函数来封装 Axios
const createAxiosInstance = (config) => {
  // 创建一个 Axios 实例
  const instance = axios.create(config);

  // 返回 Axios 实例
  return instance;
};

使用高阶函数创建实例

然后，我们利用这个高阶函数创建 Axios 实例并存储在 instance 变量中：

// 使用高阶函数创建 Axios 实例
const instance = createAxiosInstance({
  baseURL: 'https://example.com',
  timeout: 10000,
});

发送请求

最后，我们即可使用 instance 变量来发送请求：

// 使用 Axios 实例发送请求
instance.get('/api/users').then((response) => {
  console.log(response.data);
});

借助 axios-middleware 实现封装

axios-middleware 作为一款中间件工具，专为 Axios 封装而生。它允许我们拦截请求和响应，从而自定义 Axios 的行为。

导入中间件

首先，我们导入 axios-middleware 中间件：

// 导入 axios-middleware 中间件
import axiosMiddleware from 'axios-middleware';

创建 Axios 实例

创建一个 Axios 实例：

// 创建一个 Axios 实例
const instance = axios.create();

使用中间件进行封装

接着，我们使用 axiosMiddleware 对 Axios 实例进行封装，并添加请求和响应拦截器：

// 使用 axios-middleware 中间件对 Axios 实例进行封装
instance.use(axiosMiddleware);

// 添加一个请求拦截器
instance.interceptors.request.use((request) => {
  // 在发送请求之前做一些事情，例如添加身份验证令牌
  request.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return request;
});

// 添加一个响应拦截器
instance.interceptors.response.use((response) => {
  // 在收到响应之后做一些事情，例如处理错误状态码
  if (response.status === 401) {
    console.log('未授权，请登录');
    // 可以在这里重定向到登录页面
  }
  return response;
});

发送请求

现在，我们可以使用封装后的 instance 变量来发送请求：

// 使用封装后的 Axios 实例发送请求
instance.get('/api/users').then((response) => {
  console.log(response.data);
}).catch((error) => {
  console.error(error);
});