JavaScript前端面试题——JavaScript中如何终止网络请求？

参考答案

在 JavaScript 中，我们可以通过 AbortController 和 AbortSignal 来中止网络请求。
使用 AbortControler 创建一个新的 Abortcontroler对象,然后使用它的 aport0方法来中止请求。在创建请求时,将 AbortControlersignal分配给请求的 siqnal 属性，以便在调用 abort() 方法时取消请求。
以下是一个使用 AbortController 中止 fetch 请求的示例 :

const controller = new AbortController();
const signal = controller.signal;

fetch(url, { signal }).then(response => {
  // Handle the response
}).catch(error => {
  if (error.name === 'AbortError') {
    console.log('Request was cancelled');
  } else {
    console.log('Request failed:', error);
  }
});

// To abort the request, call the following:
controller.abort();

在上面的示例中，我们通过调用 controller.abort() 方法来取消网络请求使用 AbortControler 和 Abortsignal 是中止网络请求的一种可靠方式，并且在现代浏览器中得到了广泛支持。

答案解释

先扯点有的没的🤭

一开始看这题答案的时候我一脸懵逼，我想一定是因为我没有学过fetch，于是我去学了下fetch，回来再答案，完了，还是一脸懵逼，谁懂这种崩溃😩

讲真我敲代码写项目没啥大问题，但是很多面试题却答不上来，有些面试题我完全搞懂可能需要一个上午，为什么面试和实战差距那么大呀😶

这段代码实现了如何使用 AbortController 和 AbortSignal 来控制和取消 Fetch API 请求的过程。让我们逐步解释每一部分的含义和作用：

创建 AbortController 对象：

const controller = new AbortController();
const signal = controller.signal;

AbortController 是一个内置的 API，用于控制可以中止的 DOM 请求。它通过 controller.signal 提供了一个 AbortSignal 对象，该对象用于发送取消请求的信号。

发起 Fetch 请求：

fetch(url, { signal }).then(response => {
  // Handle the response
}).catch(error => {
  if (error.name === 'AbortError') {
    console.log('Request was cancelled');
  } else {
    console.log('Request failed:', error);
  }
});

fetch(url, { signal }) 发起了一个 Fetch 请求，并传入了 signal 作为选项。这意味着这个请求可以通过 controller.abort() 方法来取消（中止）。

在这里特别解释一下{ signal }。这里的 { signal } 是对 controller.signal 的解构赋值，等效于 { signal: controller.signal }。解构赋值是 ES6 中的一种新特性，这种语法允许你从对象中提取属性并将其赋值给同名的变量或常量。

处理请求的响应和错误：

如果请求成功响应，会执行 .then 中的处理函数来处理响应数据。

如果请求失败或被取消，会进入 .catch 块处理错误。如果错误类型是 AbortError，则表示请求是被取消的，否则会输出具体的请求失败信息。

取消请求：

// To abort the request, call the following:
controller.abort();

如果在执行 fetch 请求之前调用了 controller.abort() 来取消请求，那么 fetch 请求会抛出 AbortError，并且会执行 .catch 块中针对 AbortError 的处理逻辑。

综上所述，这段代码展示了如何利用 AbortController 和 AbortSignal 来控制 Fetch 请求的生命周期，包括发起请求、处理响应、捕获错误以及手动取消请求。