前言

例如用户进行某项操作（如点击“编辑”按钮），但是由于网络请求时间太长或是用户反悔，那么此时用户点击“取消”按钮之后，如果前端只是把编辑页面关掉，网络请求并没有中断，就是说用户点击“取消”之后，他的信息还是会更新。所以前端必须中断网络请求来保证用户的操作行为。

中断方式

方式一 ajax

通过xhr.abort() 取消网络请求：

var xhr = new XMLHttpRequest();
xhr.open('get', 'https://api.github.com/');
xhr.onreadystatechange = function() {
	console.log(`readyState:${xhr.readyState}`, `status:${xhr.status}`);
	if (xhr.readyState === 4) {
		if (xhr.status === 200) {
			console.log('请求成功:', JSON.parse(xhr.responseText));
		} else {
			console.log('请求失败');
		}
	}
}
xhr.send();
xhr.abort();

方式二 axios

通过cancelToken设置和 cancelToken.cancel() 取消网络请求：

function createCancelToken() {
	return axios.CancelToken.source();
	// 等同于 
	// var CancelToken = axios.CancelToken;
	// var source = CancelToken.source();
	// return source;
}

var cancelToken01 = createCancelToken();
var cancelToken02 = createCancelToken();

axios({
	method: "GET",
	url: "https://api.github.com/",
        //设置cancelToken
	cancelToken: cancelToken01.token
}).then(res => {
	console.log(res.data);
}).catch(err => {
	console.log(err);
});

axios({
	method: "GET",
	url: "https://api.github.com/",
        //设置cancelToken
	cancelToken: cancelToken02.token
}).then(res => {
	console.log(res.data);
}).catch(err => {
	console.log(err);
});

//设置cancelToken.cancel()进行取消
cancelToken01.cancel('Operation canceled by the user.');
cancelToken02.cancel('精确取消');

注意：这里两个axios请求设置不同的cancelToken，才能精确的取消某个请求，例如设置cancelToken的cancelToken01.token，就要通过cancelToken01.cancel('用户取消') 来取消;

方式三 fecth

通过abortController实例和 abortController.abort() 取消网络请求。
以下是取消 fetch 调用的工作流程：

创建一个 AbortController 实例；
该实例具有 signal 属性；
将 signal 传递给 fetch option 的 signal；
调用 AbortController 的 abort 属性来取消所有使用该信号的 fetch。

const controller = new AbortController();
const {
	signal
} = controller;

fetch("https://api.github.com/", {
	signal
}).then(response => {
	console.log(`Request 1 is complete! responce:`, response);

	if (response.status === 200) {
		// Examine the text in the response
		response.json().then(data => {
			console.log(data);
		});
	}
}).catch(e => {
	console.warn(`Fetch 1 error: ${e.message}`);
	if (e.name === "AbortError") {
		// We know it's been canceled!
		console.log(`it's been canceled`);
	}
});

fetch("https://api.github.com/", {
	signal
}).then(response => {
	console.log(`Request 2 is complete! responce:`, response);
}).catch(e => {
	console.warn(`Fetch 2 error: ${e.message}`);
});

// abort both requests
controller.abort()

应用场景

1.百度进行输入框搜索时，需要根据关键字来展示下拉区域的“猜你想搜”的内容；
2.用户进行某项操作需要临时取消。

补充

关于fetch的详细用法请自行查阅相关资料，我也不是很懂~~。

参考链接

blog.csdn.net/wopelo/arti…
blog.csdn.net/eyeofangel/…
juejin.cn/post/684490…

前端如何取消网络请求

前言