axios系列之取消请求

---

使用 cancel token 取消请求

Axios 的 cancel token API 基于cancelable promises proposal，它还处于第一阶段。

可以使用 CancelToken.source 工厂方法创建 cancel token，像这样：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios
	.get("http://localhost/user/12345", {
    
    
		cancelToken: source.token
	})
	.catch(function (thrown) {
    
    
		console.log(1);
		if (axios.isCancel(thrown)) {
    
    
			console.log("Request canceled1", thrown.message);
		} else {
    
    
			// 处理错误
		}
	});

axios
	.post(
		"http://localhost/user/12345",
		{
    
    
			name: "new name"
		},
		{
    
    
			cancelToken: source.token
		}
	)
	.catch(function (thrown) {
    
    
		console.log(2);
		if (axios.isCancel(thrown)) {
    
    
			console.log("Request canceled2", thrown.message);
		} else {
    
    
			// 处理错误
		}
	});

// 取消请求（message 参数是可选的）
source.cancel("Operation canceled by the user.");

如果需要后续取消请求，需要在cancelToken中配置，并在catch中对取消的请求进行后续处理。

还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：

const CancelToken = axios.CancelToken;
let cancel;

axios
	.get("http://localhost/user/12345", {
    
    
		cancelToken: new CancelToken(function executor(c) {
    
    
			// executor 函数接收一个 cancel 函数作为参数
			cancel = c;
		})
	})
	.catch(function (thrown) {
    
    
		if (axios.isCancel(thrown)) {
    
    
			console.log("Request canceled", thrown.message);
		} else {
    
    
			// 处理错误
		}
	});

// cancel the request
cancel();

注意: 可以使用同一个 cancel token 取消多个请求

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！