字节面试题之如何取消一个正在发送的请求

在前端开发中，我们经常需要与后端进行数据交互，也就是发送请求。但在某些场景下，比如用户快速切换页面或者重复点击某个操作，可能需要取消正在发送的请求，避免不必要的资源浪费和潜在的错误。下面将结合不同的请求方式，介绍如何取消正在发送的请求。

在字节的面试中就有这道题目------如何取消一个正在发送的请求我们如何回答能让面试官为你加分，下面我将带来讲解

1. XMLHttpRequest

XMLHttpRequest 是早期用于在浏览器和服务器之间进行异步通信的 API。要取消一个使用 XMLHttpRequest 发送的请求，可以使用其 abort() 方法。

javascript 复制代码

// 创建 XMLHttpRequest 实例
const xhr = new XMLHttpRequest();
// 打开请求
xhr.open('GET', 'https://example.com/api/data', true);
// 发送请求
xhr.send();

// 模拟一段时间后取消请求
setTimeout(() => {
    if (xhr.readyState!== 4) {
        xhr.abort();
        console.log('请求已取消');
    }
}, 2000);

在上述代码中，首先创建了一个 XMLHttpRequest 实例并发送了一个 GET 请求。然后使用 setTimeout 模拟在 2 秒后检查请求是否还未完成，如果未完成则调用 abort() 方法取消请求。

2. Fetch API

Fetch API 是现代浏览器提供的用于发起网络请求的新 API，它返回一个 Promise 对象。要取消 Fetch 请求，可以使用 AbortController。

javascript 复制代码

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

// 发起 Fetch 请求并关联信号
fetch('https://example.com/api/data', { signal })
   .then(response => {
        if (!response.ok) {
            throw new Error('请求失败');
        }
        return response.json();
    })
   .then(data => {
        console.log('请求成功:', data);
    })
   .catch(error => {
        if (error.name === 'AbortError') {
            console.log('请求已取消');
        } else {
            console.error('请求出错:', error);
        }
    });

// 模拟一段时间后取消请求
setTimeout(() => {
    controller.abort();
}, 2000);

在这个例子中，首先创建了一个 AbortController 实例，并获取其 signal 对象。然后在发起 Fetch 请求时将 signal 作为选项传递进去。当调用 controller.abort() 方法时，Fetch 请求会被取消，Promise 会被拒绝并抛出一个 AbortError。

3. Axios

Axios 是一个基于 Promise 的 HTTP 客户端，常用于浏览器和 Node.js 环境。从 Axios v0.22.0 开始，支持使用 AbortController 取消请求。

javascript 复制代码

import axios from 'axios';

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

// 发起 Axios 请求并关联信号
axios.get('https://example.com/api/data', { signal })
   .then(response => {
        console.log('请求成功:', response.data);
    })
   .catch(error => {
        if (axios.isCancel(error)) {
            console.log('请求已取消');
        } else {
            console.error('请求出错:', error);
        }
    });

// 模拟一段时间后取消请求
setTimeout(() => {
    controller.abort();
}, 2000);

这里使用 Axios 发起一个 GET 请求，并将 AbortController 的 signal 传递给请求配置。当调用 controller.abort() 时，请求会被取消，catch 块中可以通过 axios.isCancel(error) 来判断请求是否是被取消的。

4. jQuery.ajax

如果你还在使用 jQuery 进行开发，可以使用 jQuery.ajax 方法发送请求，通过返回的 jqXHR 对象的 abort() 方法来取消请求。

xml 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery AJAX 请求取消示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <script>
        // 发起 jQuery AJAX 请求
        const jqXHR = $.ajax({
            url: 'https://example.com/api/data',
            method: 'GET',
            success: function (data) {
                console.log('请求成功:', data);
            },
            error: function (error) {
                if (error.statusText === 'abort') {
                    console.log('请求已取消');
                } else {
                    console.error('请求出错:', error);
                }
            }
        });

        // 模拟一段时间后取消请求
        setTimeout(() => {
            jqXHR.abort();
        }, 2000);
    </script>
</body>

</html>

在这个 HTML 页面中，使用 jQuery.ajax 发起请求，并将返回的 jqXHR 对象保存起来。在需要取消请求时，调用 jqXHR.abort() 方法。在 error 回调中，可以通过检查 statusText 是否为 abort 来判断请求是否被取消。

在大厂面试中，还经常问道一个很重要但我们经常忽略的问题------垃圾回收机制

垃圾回收（Garbage Collection，简称 GC）是一种自动内存管理机制。在程序运行过程中，会不断地分配内存来存储数据，但当这些数据不再被使用时，就需要释放其所占用的内存，避免内存泄漏。垃圾回收机制就是负责自动检测并回收这些不再使用的内存空间，让开发者无需手动管理内存，从而降低了内存管理的复杂性和出错概率。

JavaScript 与其他企业级语言（以 Java、C# 为例）在垃圾回收方面的区别

1. 内存管理方式

JavaScript：JavaScript 通常是在浏览器环境或 Node.js 环境中运行。在浏览器中，不同的浏览器厂商可能会有不同的垃圾回收实现，例如 Chrome 浏览器使用 V8 引擎，它有自己的垃圾回收策略。而且 JavaScript 是一种动态类型语言，内存分配和释放相对灵活，但也可能导致一些难以预测的内存问题。
Java：Java 是一种静态类型语言，由 Java 虚拟机（JVM）负责内存管理和垃圾回收。JVM 提供了多种垃圾回收器，开发者可以根据应用的特点选择合适的垃圾回收器，如 Serial、Parallel、CMS、G1 等。
C# ：C# 运行在.NET 平台上，由公共语言运行时（CLR）进行内存管理和垃圾回收。CLR 的垃圾回收器采用了分代回收的策略，并且提供了一些手动干预垃圾回收的方法，但不建议频繁使用。

2. 垃圾回收的触发时机

JavaScript：垃圾回收的触发时机通常由浏览器或 Node.js 环境决定，开发者无法精确控制。例如，V8 引擎会根据内存使用情况、对象分配速率等因素来决定何时进行垃圾回收。
Java ：JVM 会根据堆内存的使用情况自动触发垃圾回收。当堆内存达到一定阈值时，就会触发相应的垃圾回收器进行回收。开发者也可以通过调用 System.gc() 方法来建议 JVM 进行垃圾回收，但这只是一个建议，JVM 不一定会立即执行。
C# ：CLR 的垃圾回收器会在内存不足或达到一定的对象分配阈值时自动触发。开发者同样可以调用 GC.Collect() 方法来手动触发垃圾回收，但也不建议滥用。

3. 对性能的影响

JavaScript：由于 JavaScript 通常运行在浏览器中，垃圾回收可能会导致页面卡顿，影响用户体验。因此，现代的 JavaScript 引擎都在不断优化垃圾回收算法，以减少对性能的影响。
Java：Java 的垃圾回收器在设计上注重性能和吞吐量，不同的垃圾回收器适用于不同的场景。例如，Parallel 垃圾回收器适用于对吞吐量要求较高的场景，而 CMS 垃圾回收器则适用于对响应时间要求较高的场景。
C# ：CLR 的垃圾回收器也在不断优化，以减少对应用性能的影响。分代回收策略可以有效地提高垃圾回收的效率，减少垃圾回收的时间。

常见的垃圾回收机制

1. 标记 - 清除算法（Mark - Sweep）

原理：该算法分为两个阶段，标记阶段会从根对象（如全局变量、函数调用栈中的变量等）开始遍历所有可达对象，并将它们标记为活动对象；清除阶段会遍历整个堆内存，将未标记的对象视为垃圾对象，并释放它们所占用的内存空间。
优缺点：优点是实现简单；缺点是会产生内存碎片，导致后续的内存分配效率降低。
应用场景：JavaScript 的早期垃圾回收器以及一些简单的垃圾回收系统中会使用该算法。

2. 标记 - 整理算法（Mark - Compact）

原理：在标记 - 清除算法的基础上，标记 - 整理算法在清除阶段会将所有活动对象移动到内存的一端，然后清除掉另一端的所有垃圾对象，从而消除内存碎片。
优缺点：优点是可以解决内存碎片问题；缺点是移动对象的过程会消耗一定的性能。
应用场景：Java 的一些垃圾回收器（如 Serial Old、Parallel Old）会使用该算法。

3. 复制算法（Copying）

原理：将堆内存分为两个相等的区域，每次只使用其中一个区域。当该区域的内存用完时，会将所有活动对象复制到另一个区域，然后清空当前区域。
优缺点：优点是不会产生内存碎片，且复制操作的效率较高；缺点是会浪费一半的内存空间。
应用场景：常用于新生代的垃圾回收，如 Java 的新生代垃圾回收器（如 Serial、Parallel Scavenge）会使用该算法。

4. 分代回收算法（Generational Garbage Collection）

原理：根据对象的存活时间将堆内存分为不同的代，通常分为新生代和老年代。新生代中存放存活时间较短的对象，老年代中存放存活时间较长的对象。不同的代采用不同的垃圾回收算法，例如新生代通常使用复制算法，老年代通常使用标记 - 清除或标记 - 整理算法。
优缺点：优点是可以根据对象的特点选择合适的垃圾回收算法，提高垃圾回收的效率；缺点是需要维护不同代的内存区域，增加了管理的复杂性。
应用场景：Java、C# 等语言的垃圾回收器都采用了分代回收算法。

垃圾回收需要注意的地方

1. 内存泄漏

原因：如果代码中存在一些对象被错误地引用，导致这些对象无法被垃圾回收器回收，就会造成内存泄漏。例如，在 JavaScript 中，如果在事件处理函数中使用了闭包，并且闭包中引用了一些对象，而这些对象在事件处理函数执行完毕后仍然被引用，就可能导致内存泄漏。
解决方法：在不需要使用对象时，及时解除对对象的引用；避免在事件处理函数中使用不必要的闭包；定期检查代码，找出可能存在的内存泄漏问题。

2. 性能问题

原因：垃圾回收操作会占用一定的 CPU 时间，尤其是在进行大规模的垃圾回收时，可能会导致应用程序的性能下降。例如，在 JavaScript 中，如果频繁地创建和销毁对象，会导致垃圾回收器频繁工作，从而影响页面的响应速度。
解决方法：尽量减少不必要的对象创建和销毁；合理使用对象池技术，复用对象，减少垃圾对象的产生；选择合适的垃圾回收器和配置参数，以提高垃圾回收的效率。

3. 跨代引用问题

原因：在分代回收算法中，新生代和老年代之间可能存在对象的引用关系，这会增加垃圾回收的复杂性。例如，当新生代进行垃圾回收时，需要考虑老年代中对新生代对象的引用。
解决方法：使用记忆集（Remembered Set）来记录跨代引用关系，减少垃圾回收时的扫描范围，提高垃圾回收的效率。

要是觉得作者的分享对你有帮助的话，请给作者点个赞吧