我们为什么要对axios进行二次封装?
因为我们可以使用请求拦截器在发送请求之前处理一些业务,使用响应拦截器在服务器数据返回后处理一些业务。
我们通常创建一个api文件夹,再创建一个request.js文件,用于存放重写后的axios。
javascript
// 引入axios
import axios from "axios";
// 利用axios对象的create 方法去创建一个axios实例,我们可以对其进行配置
const requestObj = axios.create({
// 基础路径:一般我们发送请求时都会出现api
baseURL: "/api",
// 请求超时的时间
timeout: 5000
});
// 请求拦截器:在请求发送之前,请求拦截器检测到,也可以在请求发出去之前做一些事情
requestObj.interceptors.request.use((config) => {
// config:配置对象,其中有headers请求头
return config;
})
// 响应拦截器
// 有成功请求函数和失败回调函数
requestObj.interceptors.response.use((res) => {
// 成功回调函数:直接返回请求的数据
return res.data;
}, (error) => {
// 失败回调函数:返回一个Promise对象
return Promise.reject(new Error('faile'));
})
export default requestObj;