Ajax-axios拦截器

拦截器作用

主要是在axios请求和响应之间拦截请求

拦截器有两种：

1.请求拦截器：

一般会统一在请求中添加token

2.相应拦截器：

一般会处理错误信息，和401时处理token(一般跳转到登录页面重新获取token)

拦截器常用处理流程图如下：

示例代码如下：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // debugger
    if (localStorage.getItem('token')) {
        config.headers.Authorization = localStorage.getItem('token')
    }
    return config;
    // config 请求报文 请求地址 请求方法 请求头 请求体
}, function (error) {
    // 对请求错误做些什么
    // debugger
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    // debugger
    return response;
    // response响应报文 
}, function (error) {
    // 对响应错误做点什么
    // debugger
    Toast.fail(error.response.data.message)
    if (error.response.status === 401) {
        location.href = './login.html'
    }
    return Promise.reject(error);
});

1.请求拦截器且执行成功时，

如果收到token值，把token追加到请求头的Authorization里

(Authorization这个参数是接口文档里要求的参数名)

2.相应拦截器且执行失败后，

1.2利用common.js文件中自带的Toast.fail()方法把报错文字打印在弹出框中

可以debugger查找报错的提示文字存储位置

2.2token没有获取到/过期时，即401

可以debugger查找状态码存储在error的具体位置

如果401，则通过跳转到登陆页面的方式重新获取用户的token

猜你喜欢