玩转Axios二次封装，助力前端开发更轻松！

2023-04-03 17:36:09

Axios 二次封装：提升前端开发效率

前言

Axios 是前端开发中一个广受欢迎的 HTTP 客户端库，以其简洁性和强大功能而闻名。为了满足更复杂的项目需求，对 Axios 进行二次封装是一个常见且有用的实践。本文将深入探讨 Axios 二次封装，从需求分析到实现方法，并提供一个代码示例供您参考。

Axios 二次封装的需求

在实际开发中，我们可能需要增强 Axios 的功能，以满足以下需求：

添加自定义请求头
统一处理响应状态码
设置全局配置（如基 URL、超时时间）
使用拦截器处理请求和响应
支持文件上传
跨域请求的处理
并行请求

Axios 二次封装的实现

实现 Axios 二次封装的主要方法是使用代理模式。代理模式允许创建一个代理对象，通过该对象访问并控制另一个对象（本例中为 Axios）。

以下是使用代理模式进行二次封装的一般步骤：

创建一个代理类，继承 Axios 类。
在代理类中重写 Axios 方法，实现自定义需求。
在项目中使用代理类，替换原始 Axios 类。

实现代码示例

下面是一个简单的代码示例，演示如何使用代理模式对 Axios 进行二次封装，添加自定义请求头和统一处理响应状态码：

// 创建代理类
class AxiosProxy {
  constructor() {
    this.axios = axios.create();

    // 添加请求头
    this.axios.interceptors.request.use((config) => {
      config.headers['Content-Type'] = 'application/json';
      return config;
    });

    // 统一处理响应状态码
    this.axios.interceptors.response.use((response) => {
      if (response.status >= 200 && response.status < 300) {
        return response.data;
      } else {
        return Promise.reject(response);
      }
    });
  }

  // 代理类重写 Axios 方法
  get(url, config) {
    return this.axios.get(url, config);
  }

  post(url, data, config) {
    return this.axios.post(url, data, config);
  }

  put(url, data, config) {
    return this.axios.put(url, data, config);
  }

  delete(url, config) {
    return this.axios.delete(url, config);
  }
}

// 在项目中使用代理类
const axiosProxy = new AxiosProxy();

// 示例请求
axiosProxy.get('/api/users').then((res) => {
  console.log(res);
});