面试官：如何中止一个网络请求在前端开发中，有时需要中止正在进行的网络请求，以避免不必要的资源浪费或避免对后端服务器造成不

在前端开发中，有时需要中止正在进行的网络请求，以避免不必要的资源浪费或避免对后端服务器造成不必要的负担。以下是两种常见的中止网络请求的方法：

1. AbortController

AbortController 接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。

你可以使用 AbortController.AbortController() 构造函数创建一个新的 AbortController。使用 AbortSignal对象可以完成与 DOM 请求的通信。

AbortController.signal返回一个 AbortSignal 对象实例，可以用它与一个 DOM 请求进行通信或者中止该请求。

下面是代码的实现：

// 创建 AbortController 实例 
const controller = new AbortController();
const signal = controller.signal; 

// 发起 Fetch 请求，并传入 signal 选项 
fetch('https://example.com/data', { signal })
.then(response => response.json()) .then(data => console.log(data))
.catch(error => console.error('Fetch aborted:', error)); 

// 中止请求 
controller.abort();

2. 使用 XMLHttpRequest 中止

主要基于 XMLHttpRequest 实例方法实现

XMLHttpRequest.abort()

如果请求已被发出，则立刻中止请求。

下面是代码的实现：

// 创建 XMLHttpRequest 实例 
const xhr = new XMLHttpRequest();
// 发起一个请求
xhr.open('GET', 'https://example.com/data', true);

xhr.onreadystatechange = function () { 
    if (xhr.readyState === 4 && xhr.status === 200) {
         console.log(xhr.responseText); 
    } 
};
// 中止请求 
xhr.abort();

具体细节参考：
developer.mozilla.org/zh-CN/docs/… developer.mozilla.org/zh-CN/docs/…