Axios的二次封装

Axios是一个非常流行的JavaScript库，用于进行HTTP请求。二次封装是指在使用Axios库时，将其进行进一步的封装，以便更好地满足项目的需求。

一、为什么 axios 要二次封装？

1. 简化配置：Axios本身提供了许多配置选项，但在实际项目中，往往有一些默认配置是每个请求都需要的，例如设置请求超时时间、设置默认请求头等。通过二次封装，可以将这些通用的配置预设为默认值，减少重复的代码量。

2. 统一处理错误：在实际项目中，我们通常需要统一处理HTTP请求的错误，例如网络异常、请求超时、服务器错误等。通过二次封装，可以在请求发生错误时进行统一处理，例如弹出提示框或重试请求。

3. 接口抽象化：对于复杂的API接口，我们可以将其进行抽象化，封装成更易读、易用的函数。通过二次封装，我们可以将参数的处理、URL拼接、数据格式化等逻辑与具体的API接口解耦，提高代码的可维护性和可扩展性。

4. 请求拦截和响应拦截：通过Axios的拦截器功能，我们可以在请求发送前和响应返回后执行一些通用的逻辑，例如添加请求头、添加Loading效果、统一处理响应数据等。通过二次封装，我们可以在拦截器中实现这些功能。

5. 扩展功能：有时候，我们可能需要在Axios的基础上增加一些额外的功能，例如缓存、重试机制、请求过滤等。通过二次封装，我们可以在底层实现这些扩展功能，并对外提供简单的API接口。

二、二次封装的目的是什么？

1. 简化接口：二次封装可以将原始库中的一些繁琐的参数和操作进行封装，提供更简洁的接口供开发人员使用。这样可以减少开发人员的编码量，并提高代码的可读性和可维护性。

2. 统一规范：通过二次封装，可以对原始库的一些功能进行统一规范，例如设置统一的请求头、统一的错误处理、统一的请求拦截等。这样可以保证整个项目中的请求行为一致，提高代码的可靠性和稳定性。

3. 定制化需求：在具体的项目中，可能需要对原始库的功能进行定制化的扩展或者修改。通过二次封装，可以在原始库的基础上进行定制化的改造，以满足项目特定的需求。

4. 简化错误处理：通过二次封装，可以集中处理原始库中的一些错误，并提供更友好的错误提示和处理机制。这样可以简化开发人员对于错误处理的工作，提高开发效率。

5. 隐藏实现细节：二次封装可以隐藏原始库的一些实现细节，只暴露简洁的接口给开发人员使用。这样可以避免开发人员直接操作原始库，降低出错概率，并保护原始库的稳定性。

总之，二次封装的目的是通过对原始库的定制化封装，提供更高级别的抽象、更简洁易用的接口，以满足具体项目的需求，提高开发效率和代码质量。

三、如何进行二次封装？

要对Axios进行二次封装，可以按照以下步骤进行：

1. 创建封装文件：创建一个单独的文件，例如api.js，用于封装Axios请求功能。

2. 导入Axios：在封装文件中，导入Axios库，确保已经正确安装了Axios库。

import axios from 'axios';
1

3. 创建自定义实例：使用Axios创建一个自定义实例，可以根据需要设置默认配置，例如基本URL、请求超时时间、请求拦截器等。

const instance = axios.create({
  baseURL: 'https://127.0.0.1',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
});
1
2
3
4
5
6
7

4. 添加请求拦截器：通过自定义实例添加请求拦截器，可以在每个请求发送前执行一些操作，例如设置请求头、添加Loading效果等。

instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    // 添加请求头等操作
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
1
2
3
4
5
6
7
8
9
10
11

5. 添加响应拦截器：通过自定义实例添加响应拦截器，可以在每个请求返回后执行一些操作，例如统一处理响应数据、错误处理等。

instance.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么
    // 统一处理响应数据等操作
    return response.data;
  },
  (error) => {
    // 对响应错误做些什么
    // 统一处理错误等操作
    return Promise.reject(error);
  }
);
1
2
3
4
5
6
7
8
9
10
11
12

6. 封装请求方法：根据项目需求，封装常用的请求方法，例如GET、POST、PUT等，并对参数进行适当的处理。

export function get(url, params) {
  return instance.get(url, { params });
}

export function post(url, data) {
  return instance.post(url, data);
}

export function put(url, data) {
  return instance.put(url, data);
}
1
2
3
4
5
6
7
8
9
10
11

7. 导出封装的方法：在封装文件中，通过export关键字导出封装的方法，以便其他文件可以导入并使用。

export default {
  get,
  post,
  put,
};
1
2
3
4
5

封装完成后，其他文件就可以导入并使用封装的方法，例如：

import api from './api.js';

api.get('/users').then((response) => {
  // 处理响应结果
}).catch((error) => {
  // 处理错误
});
1
2
3
4
5
6
7

通过这种方式，可以将Axios的请求功能进行定制化封装，提供简化的API接口，并可以在请求前后进行一些通用的操作，以满足项目的需求。