axios.interceptors的使用

最新推荐文章于 2024-08-04 21:45:12 发布

原创最新推荐文章于 2024-08-04 21:45:12 发布 · 1.4w 阅读

9 ·

CC 4.0 BY-SA版权

日常工作专栏收录该内容

17 篇文章

订阅专栏

本文介绍axios的请求和响应拦截器的使用方法，包括如何在请求中统一添加参数，以及如何通过响应拦截器验证token是否过期。通过具体代码示例，帮助读者理解和应用axios拦截器。

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

axios.interceptors的使用

axios.interceptors有两种，一是请求拦截，二是返回拦截。

一、请求拦截

使用场景

1.在请求时在请求参数上统一添加参数，

axios.interceptors.request.use(config=>{ 
 if(config.method=='post'){
                config.data = {
                    ...config.data,
                    "paramsName": params,
                }
            }else if(config.method=='get'){
                config.params = {
                    "paramsName":params,
                    ...config.params
                }
            }
return config;
},err=>{
  return Promise.reject(err);
});

这样就可以将你的参数添加在请求当中了。

二、结果拦截

使用场景，验证token是否过期

axios.interceptors.response.use(response=>{
},error => {
if(error.response.status === 401){
//对应的token过期的操作
}
  return Promise.resolve(error.response)
});

这里要注意的是，看你前后端阅读401的返回，一般是报错，所以你的response是空的，你需要在error的回调里面去进行相关的处理。