axios拦截器介绍

Axios中的拦截器机制解析

原创已于 2023-06-09 16:17:47 修改 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-06-09 16:12:14 首次发布

拦截器用于在发送请求和接收响应时进行拦截，例如在请求时自动添加token到headers中，响应时根据状态码显示消息。请求拦截器自动带上token，响应拦截器则处理操作状态并显示对应提示。

拦截器

什么是拦截器？

在发请求和获取服务器响应数据的过程中，可以设置拦截器将请求或响应的数据流拦截下来，做相关操作以后再放行，有请求拦截器和响应拦截器两种。

请求拦截器

在发请求时，将请求拦截下来，自动带上token

axios.interceptors.request.use(function (config) {
    //发请求时，自动携带token
    let token = local.get('token');
    if(token){
        config.headers.Authorization = 'Bearer '+token;
    }

    return config;
}, function (error) {
    return Promise.reject(error);
});

响应拦截器

在axios三层封装的第一层设置拦截器，用于拦截响应的数据，并根据操作状态弹出对应的提示框

文件：utils/request.js

//添加响应拦截器
axios.interceptors.response.use(function (res) {
    //判断操作状态是否成功
    if(res.data.code===0){
        Message.success(res.data.msg);
    }else{
        Message.error(res.data.msg)
    }

    return res;
}, function (err) {
    //访问失败时执行
    return Promise.reject(err);
});