axios拦截器的使用

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拦截器中设置对应的响应数据,其余页面均生效.

三.响应拦截器与浏览器,服务器的工作流程