在 Web 前端开发中，我们经常使用 Promise 这一技术来处理异步代码，一个 Promise 表示一个异步操作的最终完成（或失败），并且可以通过 .then() 函数来注册回调函数来处理这个异步操作的结果。但是在实际场景中，我们有时候需要取消这个异步操作，这个时候 promise-cancel 这个 npm 包就派上用场了。
promise-cancel 包是什么？
promise-cancel 是一个基于 Promise 的可取消的实现库。这个库提供了一种统一的方式来取消使用 Promise 的异步函数。
安装
你可以使用 npm 来安装 promise-cancel 包，具体的安装命令为：
npm install promise-cancel
使用
promise-cancel 是一个非常易于使用的 npm 包。
导入
在你的前端项目中使用 promise-cancel，你需要先导入它：
const promiseCancel = require('promise-cancel');创建可取消的 Promise
promiseCancel 包提供了一个 makeCancelable 函数，可以将任何一个返回 Promise 的函数，转化为可取消的 Promise。用法非常简单，下面是一个示例：
-- -------------------- ---- -------
------ ---------------- ---- -----------------
----- ------- - -------- -- -
------ ----------------- ----------
-
----- ----------------- - --------------------------------
-------------------------
-------------- -- -
--------------------------
--
------------ -- -
------------------
---
--------------------------- 上面这个代码片段中，我们将 axios 库的 get 请求封装在了一个 request 方法中。然后我们使用 makeCancelable 函数将这个方法转化为可取消的 Promise。
cancelablePromise.promise 属性就是一个普通 Promise。我们可以使用 .then() 函数和 .catch() 函数来处理这个 Promise 的状态。
我们还可以使用 cancelablePromise.cancel() 来取消这个 Promise。当 Promise 被取消的时候，这个 Promise 的状态将变为 cancelled，并且任何 .then() 和 .catch() 函数将不会被调用。 如果 Promise 已经被解决或者被拒绝，那么该方法将无任何影响。
示例代码
-- -------------------- ---- -------
------ ---------------- ---- -----------------
----- --------- - -- -- -
----- ---------- - --- ------------------
----- ------------ - ------------------ -------- --------------------
----- -------------- - -----------------------------
-------------------------------------- -- -
-----------------------------
---------------- -- -
-------------------
---
------------- -- -
------------------------
-- ------
------ -----------------------
--这个示例代码中，我们使用 fetch 函数从后台服务器请求数据。我们使用 AbortController 对象创建了一个 signal 信号，用于响应取消操作。使用 makeCancelable 函数，我们将这个异步操作转化为了可取消的 Promise。 然后，我们在 1 秒钟后调用 cancel 函数来取消这个操作。
结论
promiseCancel 包是一个非常实用的 npm 包，它为我们提供了一个简单而有效的方法来取消异步操作。在每一个涉及到异步操作的项目中，它都是一个非常不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566f381e8991b448e33d1