发布时间:2024-08-12 10:01
axios拦截器主要分为两种:请求拦截器和响应拦截器。
请求拦截器作用是在发出请求时,拦截下用户的请求,执行完一系列处理再发送出去(像添加cookie、token,请求头等)
import axios from 'axios'
import { ELMessage } from 'element-plus'
const myRequest = axios.create({
baseURL: process.env.BASE_API, // 这里可以写自己访问的地址,例如127.0.0.1
timeout: 3000, // 请求超时时间
headers: {
"Content-Type": "application/json;charset=utf-8"
}
})
这样一个axios实例就创建好了,我们就可以用这个实例来访问我们需要访问的地址
myRequest.interceptors.request.use(
req=>{...}, // 对发起的请求进行处理,方法写在{}中,req是请求参数
err=>{...}, // 出现请求错误时进行的处理
}
下面写一个设置token的实例:
myRequest.interceptors.request.use(
config => {
const token = localStorage.getItem('token') // 获取存取的token
if(token){ // 不为空的话就设置进headers
config.headers['token'] = token
}
return config
},
err => {
return Promise.reject(error)
}
)
当服务器产生响应时,对响应数据进行拦截,并对拦截的数据进行处理,处理完数据再返回,比如对于成功的返回,我们只需要返回数据,那么我们可以直接处理数据,把不需要的数据去除再返回。如果出错的话,就返回错误信息,并用message显示错误。
myRequest.interceptors.response.use(
res=>{...}, // 对响应进行处理,方法写在{}中,res是返回数据
err=>{...}, // 出现请求错误时进行的处理
)
假设服务器给我们的响应为:
{
"errCode" : 0,
"errDesc" : "Success",
"data": "xxxxxx"
}
这时候我们可以这样写响应拦截器:
myRequest.interceptors.response.use(
res => {
if(res.errCode == 0){
return Promise.resolve(res.data)
}
else {
ElMessage({
message: "Error",
type: 'error',
duration: 5 * 1000
})
return Promise.reject(new Error("Error Message"))
}
},
err => {
ElMessage({
message: err.data.message,
type: 'error',
duration: 5 * 1000
})
}
)
通过上面的处理之后,我们axios.xxx().then((res)=>{…})的res就为响应数据的data,其中errCode和errDesc就被处理掉了。