vue中请求拦截和响应拦截做了什么?执行流程,步骤图+原理。
在请求拦截中
在请求拦截中有两个回调函数,成功和失败。
成功函数中我们判断是否有token值如果有通过return将token返回给请求头
,如果没有return返回config
在失败的回调中return返回primise.reject失败的信息并且执行。
同时在请求拦截中我们还执行了loding加载。
// 请求拦截
instance.interceptors.request.use(
config=>{
// 成功函数中我们判断是否有token
// 值如果有通过return将token返回给请求头,如果没有return返回config
if(getToken()){
config.headers.Authorization=getToken()
}
startLoading()
return config //一定要返回config
},
error=>{
endLoading()
// 在失败的回调中return返回primise.reject失败的信息并且执行。
return Promise.reject(error)
}
)

在响应拦截中 == ↓↓↓ 流程图 ↓↓↓

执行流程讲解:
首先在响应拦截中,如果成功执行response,如果失败执行err。
通过response成功执行,这个response就是我们请求到返回的所有数据,我们把
数据结构出来,判断status是否是200 状态码如果200就是请求完成返回data数
据,如果状态码不是200,就提示控制台的报错信息并且返回错误信息。
通过err失败执行。err是错误信息,直接提示错误信息,并且让当前执行的链接
跳出。
代码:
instance.interceptors.response.use(
(response) => {
console.log(response);
let { data, status, statusText } = response
if (status == 200) {
return data
} else {
Message.error(statusText)
return Promise.reject(new Error(statusText))
}
},
(err) => {
Message.error(err.message)
return Promise.reject(new Error(err))
}
)
返回的错误信息执行效果,给予提示方便用户访问。

成功执行

以上就是对响应拦截执行流程的整个总结。