前端截停axios请求(CancelToken)

前端截停axios请求,使用axios的CancelToken方法

代码如下

import Axios from "axios"
const newAxiosA = Axios.create({
	baseURL: baseUrl,
});
var CancelToken = Axios.CancelToken;

var source = CancelToken.source();
newAxiosA({
	method: "post",
	url: "“,
	data: data,
	cancelToken: source.token,
	Headers: {},
})
	.then((result) => {
		} else {
		}
	})
	.catch((error) => {
	});

在需要停止时触发source.cancel('可能是因为用户注销');
		
### 使用 AxiosCancelToken 取消请求 Axios 提供了一种机制,允许开发者通过 `CancelToken` 来取消正在进行的 HTTP 请求。以下是实现这一功能的具体方法: #### 创建 CancelToken 实例 可以通过调用 `axios.CancelToken.source()` 方法创建一个 cancel token 实例。该实例会返回两个属性:一个是用于触发取消操作的方法 (`cancel`),另一个是实际的 token。 ```javascript const CancelToken = axios.CancelToken; const source = CancelToken.source(); ``` #### 将 Token 添加到请求配置中 在发起请求时,将上述生成的 token 赋值给请求配置中的 `cancelToken` 属性[^1]。 ```javascript axios.get('/user/12345', { cancelToken: source.token }).catch(function (thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // 处理其他错误 } }); ``` #### 执行取消操作 当需要取消请求时,只需调用之前保存的 `source.cancel` 方法,并可传递一条消息作为参数。 ```javascript // 当某个条件满足时执行此函数 if (someCondition) { source.cancel('Operation canceled by the user.'); } ``` 以上代码展示了如何利用 Axios 的 `CancelToken` 功能安全有效地管理并终止不必要的网络请求。 #### 完整示例 下面是一个完整的例子,演示了如何结合按钮事件动态控制请求的启动与止。 ```javascript function getUserAccount() { const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/user/12345', { cancelToken: source.token }).then(response => { console.log(response.data); }).catch(thrown => { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { throw thrown; // 或者处理其他类型的异常 } }); return () => { source.cancel('The operation was terminated.'); }; } let cancelRequest; document.getElementById('startButton').addEventListener('click', function(){ cancelRequest = getUserAccount(); }); document.getElementById('stopButton').addEventListener('click', function(){ if(cancelRequest){ cancelRequest(); } }); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值