axios请求及响应拦截

拦截器,在请求或响应被 then 或 catch 处理前拦截它们

先创建一个axios实例
 // 引入axios
import axios from 'axios'; 

// 构建axios实例
const instance = axios.create({
	baseURL: process.env.BASE_API,  // 该处url会根据环境进行更改
	timeout: 1000  // 设置请求超时连接时间
})

request拦截器(请求发送后端之前)

request拦截器通常用进行token验证,如果token不存在则强制返回登录页面

instance.interceptors.request.use(config=>{
   //config是配置
   //第一步:查看有没有token
   //一般而言,是把token是被存在sessionStorage里面 
    const token = sessionStorage.getItem('token'); 
    if(token){
      // token存在
      Object.assign(config.headers,{
        Token:token
      })
    }else{
      // token不存在,返回登录页
      sessionStorage.removeItem('token');
      window.location.href= "/login";
    }
   return config;(必须拦截以后再还回去)
},
   err => Promise.reject(error));

axios请求拦截器在发送请求之前会拦截请求,并可以对请求进行一些处理。在这个例子中,我们可以看到拦截器的配置在引用中的`http.interceptors.request.use`函数中完成。该函数接受一个参数`config`,代表当前要发送的请求的配置。在这个函数中,我们可以根据需要对请求进行一些逻辑判断。 首先,我们可以看到在这个拦截器中定义了一个数组`noLanJie`,它包含了一些不需要被拦截请求地址。如果请求的地址在这个数组中存在,那么就直接放行,不做任何处理。 如果请求的地址不在`noLanJie`数组中,那么就是需要被拦截请求。在这个例子中,拦截器会从本地存储中获取到一个名为`token`的值,并将它添加到请求请求头中的`authorization`字段中。这样,在发送请求时,会将这个`token`作为身份验证信息携带到后端。最后,拦截器需要返回`config`对象,以便让请求继续发送。 总结起来,axios请求拦截器可以在发送请求之前对请求进行一些处理,例如添加请求头信息等。拦截器可以根据请求的配置进行逻辑判断,决定是否拦截请求并进行处理。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [axios请求拦截器的配置](https://blog.csdn.net/qq_44603011/article/details/123121764)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue axios登录请求拦截器](https://download.csdn.net/download/weixin_38655810/13194829)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [axios全局拦截+请求响应处理+路由拦截](https://blog.csdn.net/weixin_42484657/article/details/122365109)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值