axios拦截器

82 阅读1分钟

Snipaste_2022-11-20_16-27-01.png

请求拦截器应用场景:可以给所有的axios请求设置请求头

(1)不使用拦截器: 我们需要手动给页面每一个axios都设置请求头

(2)使用拦截器: 只需要在拦截器中给axios设置请求头即可(因为所有的axios请求都会先进入请求拦截器)

    // config:请求报文信息
    function (config) {
        // 在发送请求之前做些什么
        // 如果有token,就在请求头中添加token
        if (localStorage.getItem('token')) {
            config.headers.Authorization = localStorage.getItem('token')
        }
        return config
    },
    function (error) {
        // 对请求错误做些什么
        return Promise.reject(error)
    }
)

响应拦截器应用:

(1)拦截401,如果遇到401错误就可以直接跳转登录页

(2)对请求错误统一处理:弹出提示框

    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)
    }
)