前言
前端开发中，我们常常会遇到需要取消异步请求的情况。例如，当用户在搜索框中快速输入内容，我们希望只保留最新一次请求结果的成功回调，而忽略掉之前的回调。此时，一个可取消的 promise 对象就非常适用了。
@ybq/p-cancelable 是一个 npm 包，它提供了一个符合 Promise/A+ 的 promise 对象，同时支持取消异步操作。这个包同时提供了一个方便的方法，用于将任何不支持取消的异步操作转变成可以取消的操作。
安装
使用 npm 进行安装：
npm install @ybq/p-cancelable
基本用法
@ybq/p-cancelable 实际上是一个 polyfill，通过对原生 Promise 构造函数进行扩展实现了可取消的 promise 对象。因此，使用方式和原生 Promise 并没有太大的区别。
创建可取消的 promise 对象
-- -------------------- ---- -------
------ ----------- ---- -------------------
----- ------- - --- --------------------- ------- --------- -- -
-- ------
------------- -- -
------------------
-- -----
-- ------
----------- -- -
-------------------- --- ---- -----------
--
--
-------
------------ -- --------------------
------------ -- ---------------------
---------------- -- ------在 PCancelable 的构造函数中，我们定义了异步操作的执行逻辑，同时声明了一个 onCancel 回调函数。如果 promise 被取消，就会在 onCancel 中执行相应操作。
取消异步操作
当 promise 被取消时，可以通过 Promise 的 cancel 方法取消异步操作。此时，promise 的状态将变为 cancelled。
promise.cancel()
判断 promise 是否已被取消
可以通过 promise 的状态属性来判断 promise 是否已被取消。
promise.isCanceled // true or false
封装可取消和不可取消的异步操作
有时候，我们需要将不支持取消的异步操作转变成支持取消的操作。这可以通过将异步操作封装在一个函数中，该函数返回值是一个 PCancelable 的实例对象，同时在该函数中监听 onCancel 回调事件来实现取消操作。
-- -------------------- ---- -------
------ ----------- ---- -------------------
------ ----- ---- -------
---
- -----------
--
-------- ---------------- -
------ ---------------------------- -- --------------
-
---
- - ----------- ----------
--
-------- -------------------------- -
------ --- --------------------- ------- --------- -- -
----- ----------- - --------------------------
-- ------
---------------- - ------------ ----------------- --
-------------- -- ------------------
------------ -- -
-- ----------------------- -
----------
- ---- -
-------------
-
--
-- ------
----------- -- -
--------------------------- --- ---- -----------
--
--
-
----- ------- - ---------------------------------------------------------------------
-------
------------ -- --------------------
------------ -- ---------------------
---------------- -- ------在 sendCancelableRequest 函数中，我们将 sendRequest 函数封装为可取消的异步操作。通过传递一个 cancelToken 参数给 sendRequest 函数，我们就可以在 promise 被取消时调用 cancelToken.cancel() 方法取消异步操作。
总结
@ybq/p-cancelable 是一个非常有用的 npm 包，它让我们可以轻松地处理可取消的 promise 对象。在实际应用中，我们可以将不支持取消的异步操作进行封装，转变成可取消的异步操作实现更加灵活的控制。
示例代码已经可以在 https://github.com/ybqzhang/nodejs-examples 中找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff481e8991b448ddc15