axios 拦截器

最新推荐文章于 2025-03-30 21:07:32 发布

^O^Come on

最新推荐文章于 2025-03-30 21:07:32 发布

阅读量198

点赞数 1

分类专栏：笔记文章标签： javascript ajax java

本文链接：https://blog.youkuaiyun.com/weixin_46349935/article/details/127464184

版权

笔记专栏收录该内容

18 篇文章

订阅专栏

本文深入探讨axios的拦截器机制，包括请求拦截和响应拦截的使用方法，以及在实际项目中如何配置和管理拦截器，提升前端请求处理的效率和灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/* 
1.什么是拦截器 : 在请求之间 和 响应之间 拦截你的axios请求
2.拦截器应用 :
    (1) 请求拦截器: 给所有的ajax请求设置统一的请求头token
    (2) 响应拦截器: 统一处理ajax错误信息
        401 : 提示用户跳转登录页
        其他错误 : 统一错误提示框

3.拦截器流程(了解即可)
    (1)发送axios请求:  axios.get()  axios.post()
    (2)进入请求拦截器:  成功就执行第一个回调函数、失败就执行第二个回调函数
    (3)服务器接收、处理、响应
    (4)进入响应拦截器:  成功就执行第一个回调函数、失败就执行第二个回调函数
    (5)执行 axios的then或catch方法

*/

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么   confit就是请求报文对象（里面有请求行、请求头、请求体）
    // 判断当前有没有token, 有就在请求头添加token,没有就不添加
    if( localStorage.getItem('token') ){
        // config.headers是请求头对象, 对他的属性赋值如果原先没有属性，其实就是添加属性操作
        config.headers.Authorization = localStorage.getItem('token')
    }
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么 （response就是服务器响应的数据，跟之前axios的then里面res是一样的）
    return response;
}, function (error) {
    // 对响应错误做点什么, promise对象的reject作用：修改promise状态为已失败，此时会执行catch方法
    if( error.response.status === 401 ){
        //如果是401 : 没有token 或 token过期就提示用户跳转登录页
        alert('请先登录')
        //跳转登录页
        location.href = './login.html'
    }else{
        //其他响应码统一提示框
        Toast.fail( error.response.data.message )
    }
    return Promise.reject(error);
});