axios全面封装
在前端开发中，我们经常会在项目中进行HTTP请求。而axios是一种常用的基于Promise的HTTP请求库，它支持浏览器和Node.js环境。本文将介绍如何全面封装axios，以提高代码的复用性和可维护性。
为什么要封装axios
封装axios的好处有很多。首先，封装可以隐藏底层的请求细节，提供更简洁、易用的接口。其次，封装可以统一处理错误，例如处理HTTP错误码、超时等。此外，封装还可以封装请求头、请求拦截、响应拦截等功能，提供更高级的功能和更灵活的配置。
axios的基本用法
在开始封装axios之前，我们先来了解一下axios的基本用法。
首先，我们需要引入axios库。
import axios from 'axios';
之后，我们可以使用axios发起HTTP请求。
下面是一个简单的GET请求示例：
axios.get('/api/users')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
上面的代码中，我们使用axios的get方法发起了一个GET请求，并通过then方法和catch方法处理了响应和错误。
除了get方法，axios还提供了post、put、delete等方法，用于发起其他类型的请求。
封装axios
接下来，我们将对axios进行全面封装，以提供更便捷、高级的功能。
首先，我们可以创建一个http.js文件，专门用于封装axios。
import axios from 'axios';
// 创建一个axios实例
const instance = axios.create({
baseURL: '/api',
timeout: 10000,
});
// 请求拦截器
instance.interceptors.request.use(config => {
// 在请求发送之前做一些处理
config.headers['Content-Type'] = 'application/json';
return config;
}, error => {
return Promise.reject(error);
});
// 响应拦截器
instance.interceptors.response.use(response => {
// 在响应成功之后做一些处理
return response.data;
}, error => {
// 在响应错误之后做一些处理
return Promise.reject(error);
});
export default instance;
上面的代码中，我们首先创建了一个axios实例，并配置了baseURL和timeout等参数。
接下来，我们通过interceptors属性添加了请求拦截器和响应拦截器。请求拦截器可以在请求发送之前做一些处理，例如设置请求头。响应拦截器可以在响应成功或失败之后做一些处理，例如统一处理错误。
最后，我们导出了这个axios实例，以便在其他地方使用。
使用封装的axios
现在，我们可以在项目中使用封装的axios了。
首先，我们需要引入封装的axios。
import http from './http';
之后，我们就可以使用http发起HTTP请求了。
下面是一个封装后的GET请求示例：
http.get('/users')
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
上面的代码中，我们使用封装的axios的get方法发起了一个GET请求，并通过then方法和catch方法处理了响应和错误。
除了get方法，我们也可以使用post、put、delete等方法，以及其他配置项。
总结
本文介绍了如何全面封装axios，以提高代码的复用性和可维护性。
首先，我们了解了为什么要封装axios，以及封装axios的好处。
接着，我们学习了axios的基本用法，以及如何发起HTTP请求。
最后，我们通过创建一个http.js文件，全面封装了axios，并提供了请求拦截、响应拦截等功能。
通过封装axios，我们可以隐藏底层细节，提供更简洁、易用的接口。同时，我们还可以统一处理错误、配置
