vue中请求拦截和响应拦截做了什么？执行流程，步骤图+原理。

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
        // data = 请求后返回的数据
        // status = 状态码200
        // statusText = 返回的错误信息
        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))
    }
)

返回的错误信息执行效果，给予提示方便用户访问。

成功执行

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