axios请求拦截器中取消请求

对某些特定请求,可以在请求拦截器中进行判断,是否取消改请求

起因:一个商城的首页,有商品的展示,可以直接添加到购物车;

但一般进入首页不会要求用户登录,如果添加购物车,提示用户进行登录;

但是这个添加购物车的请求依然会发出,这时需要在请求拦截内进行处理

下面是完整代码:

import axios from 'axios';
import {Message} from 'element-ui'
import router from '../router/index'
// 按照axios官方提示需要引入这两步
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

const instance = axios.create({
	baseURL: "http://xxx.xxx.xxx",
	timeout: 5000,
	headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

// 请求拦截器
instance.interceptors.request.use(config => {
	let tokenS = sessionStorage.getItem('token');
	let tokenL = localStorage.getItem('token');
	if (tokenS || tokenL) {
		config.headers['token'] = tokenS || tokenL;
	} else {
		if (config.url ===
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
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 ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值