Promise 如何取消请求

在前端开发中，我们经常需要向后端发送请求来获取数据，但有时候我们可能需要取消一些请求，比如用户在某个页面进行了操作，但是该页面上的数据请求还未返回，这时候用户可能会离开该页面，如果我们没有及时取消该请求，就会造成不必要的资源浪费和网络负担。

Promise 是一种用于异步编程的语法，它可以让我们更加方便地处理异步操作，同时也提供了一种取消 Promise 的方法，接下来我们就来详细介绍如何使用 Promise 取消请求。

Promise 取消请求的方式

在 Promise 中取消请求有两种方式，分别是通过 abortController 和手动实现取消。

通过 abortController 取消请求

AbortController 是一个新的 Web API，它提供了一种取消网络请求的方法，它可以用于取消 Fetch 请求和 XmlHttpRequest 请求。

使用 AbortController 取消请求的具体步骤如下：

1. 创建一个 AbortController 对象和一个对应的 AbortSignal 对象。

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

1. 将 AbortSignal 对象作为 fetch 或 xhr 请求的 signal 参数传入。

fetch(url, {signal}).then(...).catch(...);
xhr.open(method, url);
xhr.send(data);
xhr.addEventListener('abort', () => { ... });
xhr.addEventListener('error', () => { ... });
xhr.addEventListener('timeout', () => { ... });
xhr.abort();

1. 调用 AbortController 对象的 abort 方法来取消请求。

controller.abort();

手动实现取消

手动实现取消请求的具体步骤如下：

1. 构造一个 Promise 对象。

const promise = new Promise((resolve, reject) => {
    ...
});

1. 在 Promise 对象中添加一个 cancel 可调用函数，该函数用于取消请求。

const promise = new Promise((resolve, reject) => {
    promise.cancel = () => {
        ...
    };
});

1. 在请求中添加一个标志位，用于判断是否需要取消请求。

const promise = new Promise((resolve, reject) => {
    let isCanceled = false;
    ...
});

1. 在请求过程中，判断标志位是否为 true，如果为 true 则取消请求。

-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
    --- ---------- - ------
    ----- ------- - ------------------------ -- -
        -- ------------ -
            ---------- -------------- ------------
            -------
        -
        ------------------
    -------------- -- -
        -- ------------ -
            ---------- -------------- ------------
            -------
        -
        --------------
    ---
    -------------- - -- -- -
        ---------- - -----
        ----------------
    --
---

Promise 取消请求的示例代码

下面是一个使用 Promise 和 AbortController 取消 Fetch 请求的示例代码：

-- -------------------- ---- -------
----- ---------- - --- ------------------
----- ------ - ------------------

---------- ----------------------- -- -
    ----------------------
-------------- -- -
    -- ----------- --- ------------- -
        -------------------- -----------
    - ---- -
        ---------------------
    -
---

-------------------

下面是一个使用 Promise 和手动实现取消请求的示例代码：

-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
    --- ---------- - ------
    ----- ------- - ------------------------ -- -
        -- ------------ -
            ---------- -------------- ------------
            -------
        -
        ------------------
    -------------- -- -
        -- ------------ -
            ---------- -------------- ------------
            -------
        -
        --------------
    ---
    -------------- - -- -- -
        ---------- - -----
        ----------------
    --
---

--------------------- -- -
    ----------------------
-------------- -- -
    ---------------------
---

-----------------

总结

通过本文的介绍，我们了解了 Promise 如何取消请求的两种方式，分别是通过 AbortController 和手动实现取消。在实际开发中，我们可以根据具体情况选择使用哪种方式来取消请求，从而避免不必要的资源浪费和网络负担。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658e24dbeb4cecbf2d3f8107