如何中断一个已发出去的请求?

最近在开发中遇见了如何中断已经发送web请求的问题，在这里跟大家探讨一下。

中断axios请求

axions 中断请求有两种方式：

方式一
使用 CancelToken.souce 工厂方法创建一个 cancel token，代码如下：

import axios from 'axios'

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

// 换成服务器资源地址是一样的 https://mdn.github.io/dom-examples/abort-api/sintel.mp4
axios.get('http://localhost:8071/preser/getPolicies', {
  cancelToken: source.token
}).catch(function (thrown) {  // 中断请求会进入报错
  // 判断请求是否已中止
  if (axios.isCancel(thrown)) {
    // 参数 thrown 是自定义的信息
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求（message 参数是可选的）
source.cancel('已经中断请求');

axios 为我们提供了一个 isCancel() 方法，用于判断请求的中止状态。isCancel() 方法的参数，就是我们在中止请求时自定义的信息。

中断后的网络请求变成如下所示：

在控制台输出报错的信息：

方式二

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

const CancelToken = axios.CancelToken;
let cancel;

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

// 取消请求
cancel('已经中断请求');

浏览器运行结果与方式一一致，此处不再赘述。

中断fetch请求

Fetch 是 Web 提供的一个用于获取资源的接口，如果要终止 fetch 请求，则可以使用 Web 提供的 AbortController 接口。

_

AbortController 接口表示一个控制器对象，可以根据需要终止一个或多个Web请求。

AbortController()：AbortController()构造函数创建一个新的 AbortController 对象实例

signal：signal 属性返回一个 AbortSignal 对象实例，它可以用来 with/about 一个Web(网络)请求

abort()：终止一个尚未完成的Web(网络)请求，它能够终止 fetch 请求，任何响应Body的消费者和流

_

首先我们使用 AbortController() 构造函数创建一个控制器，然后使用 AbortController.signal 属性获取其关联 AbortSignal 对象的引用。当一个 fetch request 初始化时，我们把 AbortSignal 作为一个选项传递到请求对象 (如下：{signal}) 。这将信号和控制器与获取请求相关联，然后允许我们通过调用 AbortController.abort() 中止请求。

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', fetchVideo);

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

function fetchVideo() {
  //...
  fetch(url, {signal}).then(function(response) {
    //...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}

当中断请求后，网络请求变成了如下所示：

可以看到，AbortSignal 对象的 aborted 属性由初始时的 false 变成了中止后的 true 。

但是AbortControllter 有兼容性问题，如下：

有什么问题欢迎大家补充！