axios的拦截器非常好用,分为请求拦截器与响应拦截器两种,一般把拦截器卸载api文件下的xxx.js下,
xxx.js中配置,二次封装
//对于axios进行二次封装
import axios from 'axios'
//主要是要用到他的请求和拦截器(为什么要二次封装)
//1.利用axios对象的方法create,去创建一个axios实例
//2.request就是axios,只不过稍微配置一下
const requests = axios.create({
//配置对象
baseUrl:'/api', //基础路径,发送请求时候,代表基于哪个路径出现api
//代表请求的时间
timeout:5000,
})
对axios函数配置了一下,下面可以直接用requests,写拦截器
//1.利用axios对象的方法create,去创建一个axios实例
//2.request就是axios,只不过稍微配置一下
1.请求拦截器,在发请求之前,请求拦截器可以监测到,可以在请求发出去之前做一些事情
requests.interceptors.request.use((config)=>{
//config 配置对象,对象里面有一个属性很重要,headers请求
return config
})
2.响应拦截器:服务器相应数据回来以后,响应拦截器可以监测到,可以做一些事情
//响应拦截器
requests.interceptors.response.use((re)=>{
//成功的回调函数:服务器相应数据回来以后,响应拦截器可以监测到,可以做一些事情
return res.data;
},(error)=>{
//响应失败的回调函数
return Promise.reject(new Error('faile')) //终止Promise链子
})
最后对外暴露就完成了axios二次封装,设置了两个拦截器
export default requests;
ps完整代码:
//对于axios进行二次封装
import axios from 'axios'
//主要是要用到他的请求和拦截器(为什么要二次封装)
//1.利用axios对象的方法create,去创建一个axios实例
//2.request就是axios,只不过稍微配置一下
const requests = axios.create({
//配置对象
baseUrl:'/api', //基础路径,发送请求时候,代表基于哪个路径出现api
//代表请求的时间
timeout:5000,
})
//请求拦截器,在发请求之前,请求拦截器可以监测到,可以在请求发出去之前做一些事情
requests.interceptors.request.use((config)=>{
//config 配置对象,对象里面有一个属性很重要,headers请求
return config
})
//响应拦截器
requests.interceptors.response.use((re)=>{
//成功的回调函数:服务器相应数据回来以后,响应拦截器可以监测到,可以做一些事情
return res.data;
},(error)=>{
//响应失败的回调函数
return Promise.reject(new Error('faile')) //终止Promise链子
})
//对外暴露
export default requests;