axios拦截器官网:axios中文文档|axios中文网 | axios
axios拦截器分为请求拦截器和响应拦截器
一 . 请求拦截器应用场景 :可以给所有的axios请求设置请求头
axios.interceptors.request.use(
// config:请求报文信息
function (config) {
// 在发送请求之前做些什么
// 如果有token,就在请求头中添加token
if (localStorage.getItem('token')) {
config.headers.Authorization = localStorage.getItem('token')
}
return config
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error)
}
)
分析 : 浏览器发送请求,请求拦截器会先进行拦截,并判断硬盘(本地存储)中是否有token,如果有则在请求头中添加token,因为axios请求都会先走请求拦截器,则只需要在请求拦截器中给请求头添加token,其它页面均生效.
二 . 响应拦截器应用场景 :可以对请求错误统一处理:例如弹出提示框
axios.interceptors.response.use(
function (response) {
// 对响应数据做点什么
return response
},
function (error) {
// 对响应错误做点什么
// 如果是401错误,说明token没有 或 过期,就跳转登录页
if( error.response.status === 401 ){
alert('请先登录')
location.href = './login.html'
}else{//其他的错误,就弹出提示框
Toast.fail(error.response.data.message)
}
return Promise.reject(error)
}
)
分析 : 服务器响应时会先经过响应拦截器拦截,并统一对错误进行处理,例如:判断错误状态码,弹出对应提示框,对于其它错误,则根据获得的响应信息弹框即可.因为服务器响应时一定会先走响应拦截器,则只需要在axios拦截器中设置对应的响应数据,其余页面均生效.
三.响应拦截器与浏览器,服务器的工作流程