【前端】中断请求的方式

一 使用 Axios 和取消令牌

1.步骤:

1. 初始化取消源,创建CancelToken

const source = axios.CancelToken.source();

2. 传递cancelToken, 发起请求

axios.get('/api/data', {cancelToken: source.token
});

3. 触发取消请求

source.cancel('操作被取消');

4. 判断错误是否由于取消请求操作引起的

if (axios.isCancel(error)) {console.log('请求已被取消');
}

2.示例:

<template><button @click="fetchData">获取数据</button><button @click="cancelRequest">取消请求</button>
</template><script setup>
import axios from 'axios';
import { ref } from 'vue';// 1.1初始化取消源
const cancelSource = ref(null);
// 发起请求
function fetchData() {// 创建CancelTokencancelSource.value = axios.CancelToken.source();axios.get('https://example.com/api/data', {// 2.传递cancelToken, 发起请求cancelToken: cancelSource.value.token,}).then(response => {console.log('响应数据:', response.data);}).catch(error => {// 4.判断是否取消请求if (axios.isCancel(error)) {console.log('请求已取消');} else {console.error('请求失败:', error);}});
}
// 3.点击按钮触发取消请求
function cancelRequest() {if (cancelSource.value) {cancelSource.value.cancel('取消请求');}
}
</script>

注: 检查是否被取消
在请求的 catch 函数中，通过 axios.isCancel(error) 检查错误是否是由取消操作引起的。
这样就可以在 Vue 3 中手动中断一个请求，并且在取消请求时进行相应的处理。

二 使用 Fetch API 和 AbortController

1. AbortController

AbortController 是一种用于取消 Fetch API 请求的标准方法，也可以与 axios 结合使用来取消请求。

2.使用 AbortController 的基本步骤

// 1.创建 AbortController
const controller = new AbortController();
const signal = controller.signal;// 2.将信号传递给 fetch 请求
fetch('https://example.com/api/data', { signal }).then(response => response.json()).then(data => console.log(data)).catch(error => {if (error.name === 'AbortError') {console.log('请求已中断');} else {// 处理其他错误}});// 2.将信号传递给 axios 请求
axios.get('/api/data', {signal: signal
}).then(response => {// 处理响应
}).catch(error => {if (error.name === 'CanceledError') {console.log('请求被取消');} else {console.error('请求失败', error);}
});// 3.在某个时刻决定中断请求
controller.abort();

注: 确保 axios 版本支持 AbortController（建议使用最新版本）。
取消请求后，需要在 catch 中检查错误类型。

三 使用 abort()

abort() 方法用于取消正在进行的 AJAX 请求。

1. 使用XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.send();// 取消请求
xhr.abort();

2.使用jQuery.ajax

var jqXHR = $.ajax({url: '/api/data',type: 'GET'
});// 取消请求
jqXHR.abort();