Axios 再封装三部曲：不一样的请求封装
2023-10-31 12:19:30
导语
随着前端开发的不断发展，对网络请求的需求也变得愈发复杂。Axios 作为一款轻量级且易于使用的 HTTP 库，受到众多开发者的青睐。为了进一步简化和增强 Axios 的使用体验，笔者对 Axios 进行了一系列封装，并在本文中与大家分享封装的经验和心得。
Axios 简介
Axios 是一个基于 Promise 的 HTTP 库，可以轻松发送异步 HTTP 请求。它具有以下特点：
- 简单易用：Axios 的 API 非常简单，只需几行代码即可发送请求。
- 功能强大：Axios 提供了丰富的功能，包括支持各种请求方法、超时设置、请求拦截器和响应拦截器等。
- 轻量级：Axios 的体积非常小，仅有几千字节，不会对应用程序的性能造成影响。
Axios 的封装
Axios 的封装可以分为三个层次：
- 第一次封装：基本封装
第一次封装主要是一些简单的封装，例如将 Axios 的请求方法封装成一个函数，并提供一些常用的配置项，如超时时间和请求头。这种封装可以简化 Axios 的使用，但灵活性较差。
- 第二次封装：进阶封装
第二次封装在基本封装的基础上，加入了一些更高级的功能，例如支持多实例化、请求拦截器和响应拦截器。这种封装可以满足更多场景的需求，但也增加了封装的复杂性。
- 第三次封装：框架级封装
第三次封装是在进阶封装的基础上，将 Axios 封装成一个框架，提供一套完整的请求解决方案。这种封装可以提供更强大的功能和更高的灵活性，但需要更多的开发经验和技术栈知识。
第三次封装的重点：多实例化和 class 封装
第三次封装的重点是多实例化和 class 封装。多实例化是指可以创建多个 Axios 实例，每个实例都可以独立配置和使用。class 封装是指将 Axios 封装成一个 class，并通过 class 的方法来发送请求。这种封装方式具有以下优点：
- 灵活性更强： 多实例化和 class 封装可以提供更强的灵活性，可以根据不同的场景创建不同的 Axios 实例，并使用不同的配置和拦截器。
- 可扩展性更好： class 封装可以很容易地扩展 Axios 的功能，例如可以添加新的请求方法、新的拦截器等。
- 代码更清晰： class 封装可以使代码更加清晰和易于维护，特别是当项目中有多个请求场景时。
第三次封装的代码示例
class Axios {
constructor(config) {
this.instance = axios.create(config);
}
get(url, config) {
return this.instance.get(url, config);
}
post(url, data, config) {
return this.instance.post(url, data, config);
}
put(url, data, config) {
return this.instance.put(url, data, config);
}
delete(url, config) {
return this.instance.delete(url, config);
}
// 其他请求方法同理
}
// 创建一个 Axios 实例
const instance1 = new Axios({
baseURL: 'https://api.example.com',
timeout: 10000,
});
// 使用 Axios 实例发送请求
instance1.get('/users').then((res) => {
console.log(res.data);
});
结语
Axios 的封装可以极大地简化和增强 Axios 的使用体验，本文介绍的第三次封装重点关注多实例化和 class 封装，提供更灵活和可扩展的请求封装方式。希望本文对大家有所帮助，也欢迎大家在评论区分享自己的封装经验和心得。
