axios

1、使用 CancelToken.souce 工厂方法创建一个 cancel token

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('https://mdn.github.io/dom-examples/abort-api/sintel.mp4', {
  cancelToken: source.token
}).catch(function (thrown) {
  // 判断请求是否已中止
  if (axios.isCancel(thrown)) {
    // 参数 thrown 是自定义的信息
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

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

2、通过传递一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token

1
2
3
4
5
6
7
8
9
10
11
12
const CancelToken = axios.CancelToken;
let cancel;

axios.get('https://mdn.github.io/dom-examples/abort-api/sintel.mp4', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel('Operation canceled by the user.');

fetch

使用Web提供的AbortController接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 使用 AbortController() 构造函数创建一个控制器，然后使用 AbortController.signal 属性获取其关联 AbortSignal 对象的引用
const controller = new AbortController();
let signal = controller.signal;
console.log('signal 的初始状态: ', signal);

const downloadBtn = document.querySelector('.download');
const abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', function(){
  fetch(url, {signal}).then(function(response) {
    //...
  }).catch(function(e) {
    console.log('Download error: ' + e.message);
  })
});

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('signal 的中止状态: ', signal);
});

[文章来源于](https://mp.weixin.qq.com/s/OvipsKTx1786wqrc7bEObg)