前言

金三银四，又快到了新的一年换工作的时候了，各种妖魔鬼怪的问题又出来了，比如 "如何根据手机壳颜色来动态改变手机主题颜色"，虽然这个不是面试题，但是现在想想还是依然很好笑。

最近我会放几篇关于前端一些面试题，因为我主要是做Vue的，所以可能react的相关问题不多，但也会涉及。

今天先给大家说一个我曾经面试遇到过一个看似比较幼稚的问题，但实际还真是自己的知识盲区。—  如何中断一个网络请求？

背景知识

• XMLHttpRequest

我们都知道在前端进行网张请求的时候，基本上都是采用XMLHttpRequest这个对象。看一下官网中对此的简单介绍
"XMLHttpRequest 对象用于在后台与服务器交换数据。

什么是 XMLHttpRequest 对象？

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想，因为您能够：

• 在不重新加载页面的情况下更新网页
• 在页面已加载后从服务器请求数据
• 在页面已加载后从服务器接收数据
• 在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。" 出自 《w3school》

之前用 JQuery的时候 $.ajax 底层也是用的这个对象，包括现在非常流程的前端请求框架 axios  web底层也是用的这个对象（并不是都是采用这个对象，axios是根据不同的运行环境采用不用的工作原理）

• fetch

简单介绍一下什么是 fetch

"Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用 XMLHttpRequest 实现的。Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用，例如  Service Workers。Fetch 还提供了专门的逻辑空间来定义其他与 HTTP 相关的概念，例如 CORS 和 HTTP 的扩展。"出自 《MDN Web Docs》

也就是说现在前端进行网络请求有两种不同的实现方式，可以使用 XMLHttpRequest 方式 也可以 采用 Fetch的方式。

fetch现在可能用的还不是很多，基本上还是以 XMLHttpRequest为主。

好，简单介绍一下背景知识之后，我们正式开始今天的话题：如何中断一个正在发送的网络请求？

如何中断一个网络请求

上面我们介绍了在前端中两种请求网络的不同实现方式，现在我们就分别介绍这两种方式如何中断请求。

• XMLHttpRequest
  XMLHttpRequest对象带了一个方法 abort() 可以实现这个效果，但现实是我们很少去用原生的这样的写法去请求网络，都是采用比较成熟的第三方框架去实现，所以我们这里着重介绍一下基于 axios 的实现方式。

基于 CancelToken方式：

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函数：

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

Fetch

先看一下浏览的支持情况吧

我们先使用AbortController()构造函数创建一个控制器，

然后使用 AbortController.signal属性获取其关联 AbortSignal 对象的引用。

当一个 fetch request 初始化，我们把 AbortSignal 作为一个选项传递到到请求对象（如下 { signal }）。这将 signal和controller 与这个 fetch request 相关联，然后允许我们通过调用 AbortController.abort() 中止请求，

如下第二个事件监听函数。

const controller = new AbortController();
let signal = controller.signal;
const downloadBtn = document.querySelector('.download');
const abortBtn = document.querySelector('.abort');
downloadBtn.addEventListener('click', fetchVideo);
abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});
function fetchVideo() {
  //...
  fetch(url, {signal}).then(function(response) {
    //...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}

当abort() 被调用时，这个fetch() promise  reject 一个名为 AbortError 的 DOMException。

写在最后

大多数小伙伴可能都不知道发出去请求还能中断，原来我也不知道，但是后来查阅相关资料之后发现的确实是可以前端博大精深。

在一些面试中这些问题虽然平时用不到（也是有点用处的）但确是面试官非常喜欢问的知识，可能他们也不一定会，所以这里介绍给大家