axios使用cancel取消请求

axios使用cancel取消请求

提供了两种取消请求的方法: AbortController 和 CancelToken
官方文档: https://www.axios-http.cn/docs/cancellation

AbortController

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()

只支持 v0.22.0 及之后的版本使用

CancelToken

CancelToken是一个生成令牌的函数，你可以调用它来获取一个cancel函数和一个promise。你可以在任何地方调用cancel函数来取消请求，而promise会在请求被取消时解决。

import axios from "axios";
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

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

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

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

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

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();

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

取消之后再次发送请求提示被cancel解决办法

如果在 axios 中取消了一个请求，那么再次发送同样的请求也会取消请求。这是因为 axios 同样的请求已经被 cancel ，因此无法再次发送。如果需要再次发送同样的请求，需要重新创建一个新的 cancelToken ，否则会一直提示被取消。

import axios from "axios";
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

let cancelToken = axios.CancelToken;
let cancel;
cancelToken.source = function source() {
  var token = new cancelToken(function executor(c) {
    cancel = c; // executor 接受一个 cancel 函数作为参数
  });
  return {
    token: token,
    cancel: cancel
  };
};

const source = cancelToken.source();
//HTTPrequest拦截
axios.interceptors.request.use(
	function (config) {
		config.cancelToken = source.token; // 全局添加cancelToken
		
		if (typeof cancel === 'function') { // 重新创建 cancelToken 
	      	config.cancelToken = new cancelToken(function executor(c) {
	        	cancel = c; 
	      	});
	    }
		return config;
	}
)
//HTTPresponse拦截
axios.interceptors.response.use(
 (response) => {
 	return response;
 },
 (error) => {
 	const res = error.response || {};
 	if (res.status === 478) {
 		// 取消请求（message 参数是可选的）
 		source.cancel('登录信息已过期');
 	}
 }
)

总结

我们首先通过 CancelToken.source() 创建了一个可以取消请求的源。然后，在发送请求时，我们通过 cancelToken 选项将取消令牌传递给请求。如果需要取消请求，我们调用source.cancel()方法，它会引发一个错误，你可以在catch块中捕获这个错误以决定如何处理。如果后续需要再次发送同样的请求，需要重新创建一个新的 cancelToken，否则会一直提示被取消。