简单又好用，axios封装教程让你的前端开发更加高效！
2023-12-10 01:47:26
axios封装：提升前端开发效率
一、Axios简介
Axios是一个广泛应用于前端开发中的HTTP请求库，它基于Promise，可轻松处理异步请求。它的众多优势包括：
- 支持多种HTTP请求类型，如GET、POST、PUT、DELETE
- 支持JSON和表单数据请求格式
- 自动处理请求和响应头
- 提供超时和重试选项
- 支持Cookie和身份验证
- 借助拦截器，可对请求和响应进行自定义处理
二、Axios封装
Axios封装是一种预配置Axios库的做法，旨在简化项目开发。通过封装，无需反复编写通用代码，提高开发效率。
1. 创建Axios实例
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://example.com',
timeout: 10000,
});
上述代码创建了一个Axios实例，设置了baseURL和timeout选项。baseURL指定请求的根URL，timeout设置请求的超时时间。
2. 设置默认配置
通过instance.defaults属性可设置默认配置，例如设置默认请求头：
instance.defaults.headers.common['Authorization'] = 'Bearer 123456';
此代码设置了Authorization头，其值为"Bearer 123456"。
3. 使用Axios拦截器
Axios拦截器可在请求和响应被发送或接收之前或之后执行特定操作，用于处理错误、添加日志或自定义头。
通过instance.interceptors.request和instance.interceptors.response属性使用拦截器，例如，以下代码可处理错误：
instance.interceptors.response.use(
function (response) {
return response;
},
function (error) {
console.log(error);
return Promise.reject(error);
}
);
此代码捕获所有错误，并将其输出到控制台。添加自定义头：
instance.interceptors.request.use(
function (config) {
config.headers['X-My-Custom-Header'] = 'value';
return config;
}
);
此代码为每个请求添加名为"X-My-Custom-Header"的头，其值为"value"。
三、使用Axios封装进行开发
封装后，即可在项目中使用Axios。
1. 配置多个实例
有时可能需要多个Axios实例，例如，一个处理用户请求，另一个处理管理请求：
const userInstance = axios.create({
baseURL: 'https://example.com/api/users',
});
const adminInstance = axios.create({
baseURL: 'https://example.com/api/admin',
});
2. 使用Axios进行并发请求
Axios支持并发请求：
Promise.all([
instance.get('/users'),
instance.get('/posts'),
]).then((responses) => {
console.log(responses);
});
上述代码同时发送两个GET请求，并输出响应数据到控制台。
结论
Axios封装简化了Axios库的使用，提升了前端开发效率。可配置多个实例，使用拦截器自定义请求和响应处理，并支持并发请求。
常见问题解答
- Axios封装有哪些好处？
- 减少重复代码
- 增强代码可维护性
- 简化项目开发
- 如何创建Axios实例？
使用axios.create()方法，指定baseURL、timeout等选项。
- 如何使用Axios拦截器？
使用instance.interceptors.request和instance.interceptors.response属性，添加请求和响应处理逻辑。
- Axios封装是否支持并发请求？
是的，可以使用Promise.all()方法进行并发请求。
- Axios封装如何处理错误？
通过拦截器或在catch()块中处理错误，记录错误并返回错误响应。
