axios取消请求的方法

// 创建请求控制器
let controller = new AbortController();
// 第二种方法:try…catch
try {
// 发送请求
const res = await axios.get(api, params, {
timeout: 0, // 设置超时时间为 0/null 表示永不超时
signal: controller.signal, // 绑定取消请求
});
} catch (error) {

// 判断是否为取消上传
if (error.message == "canceled"){
    // 进行后续处理
    
};

}
// 终止请求
controller.abort();

封装 Axios 取消请求通常是为了提高 JavaScript 应用程序中 HTTP 请求的管理效率,特别是当你需要处理长时间运行的操作或者在用户取消操作时停止请求时。下面是一个简单的例子,展示了如何在 TypeScript 中使用 Axios 实现这个功能: ```typescript import axios from 'axios'; // 创建一个带取消请求功能的 Axios 实例 class CancelableAxios { private axiosInstance: AxiosInstance; private cancelTokenSource?: CancelTokenSource; constructor() { this.axiosInstance = axios.create(); } // 发起请求,并返回一个可以用于取消请求的 token async request(url: string): Promise<{ data: any; cancel: () => void }> { const cancelTokenSource = axios.CancelToken.source(); this.cancelTokenSource = cancelTokenSource; try { return await this.axiosInstance({ url, method: 'GET', cancelToken: cancelTokenSource.token, }); } catch (error) { if (axios.isCancel(error)) { console.log('Request canceled by the user'); } throw error; } } // 取消请求 cancel(): void { if (this.cancelTokenSource) { this.cancelTokenSource.cancel(); this.cancelTokenSource = undefined; } } } const axiosWithCancel = new CancelableAxios(); // 使用示例 async function fetchData() { const { data, cancel } = await axiosWithCancel.request('https://api.example.com/data'); // 用户点击取消按钮时 if (buttonWasClickedToCancel) { cancel(); } console.log(data); } fetchData(); ``` 在这个封装中,我们创建了一个 `CancelableAxios` 类,它有一个内部的 `cancelTokenSource`,并在每次请求时返回一个新的取消令牌。如果用户需要取消请求,只需要调用 `cancel()` 方法即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值