在前端开发中，经常会用到异步操作来处理一些需要较长时间才能完成的任务。而 Promise 是 ES6 中的一个重要特性，可以更加方便地处理异步操作。但是，在某些情况下，我们可能需要取消正在进行的异步操作。那么，我们该如何在 Promise 中实现取消异步操作呢？
取消异步操作的需求
一个常见的场景是，在用户输入实时搜索框时，我们需要向后台发送异步请求并显示搜索结果。如果用户在 500 毫秒内连续输入多个字符，我们就需要取消之前的请求并重新发送新的请求，以避免产生不必要的请求浪费。
还有另一个例子是，我们在向后台上传大量数据时，如果用户在上传过程中中途取消了操作，我们希望能够立即停止上传并将已上传的数据清空，以保证用户体验。
以上两种场景都需要取消异步操作，避免不必要或者无法控制的请求或操作。下面我们就来探讨一下在 Promise 中如何实现取消异步操作。
Promise 中的取消
由于 Promise 是用来处理异步操作的，因此要实现取消异步操作就需要在 Promise 中进行相关处理。常见的做法是使用一个 CancelToken 来包装异步操作，并通过其他方式来控制这个 CancelToken，以方便对异步操作进行取消。
实现思路
我们可以通过在 Promise 中使用一个 CancelToken 来包装异步操作，这个 Token 包含一个 cancel() 方法，当我们调用了这个方法时，就可以取消异步操作。同时，在异步操作完成之后，我们需要检查 CancelToken 是否已经取消，如果已经取消，则不再触发后续事件。
下面是一个简单的实现：
-- -------------------- ---- -------
----- ----------- -
------------- -
---------------- - ------
-
-------- -
---------------- - -----
-
------------------ -
-- ------------------ -
----- --- -------------------
-
-
-
----- ------- -
---------------- -
-------- - ----
---------------- - --- --------------
-
--------- -
------ --- ----------------- ------- -- -
----- --- - --- -----------------
--------------- --------- ------
---------- - -- -- -
-- ------------------------------ -
-------
-
-- ----------- -- --- -- ---------- - ---- -
--------------------------
- ---- -
-----------------------
-
--
----------- - -- -- -
-- ------------------------------ -
-------
-
-----------------------
--
----------- - ------
------------- - -- -- -
-- ------------------------------ -
-------
-
------------------
--
------------------------------------
-----------
---
-
-上面的代码中，我们首先定义了一个 CancelToken 类，这个类包含一个 isCancelled 属性和 cancel() 方法。之后我们在 Request 类中使用了这个 CancelToken，来实现了对异步请求的取消。
示例代码
下面给出一个实际使用的示例代码：
-- -------------------- ---- -------
----- --------- - ------------------------------------------------
----- -------------- -
------------- -
---------------- - --- --------------
-
------------------- -
----- --- - -------------------------
----- ------- - --- -------------
------------------- - -----------------
------ -------------------------- -- -----------------
-
-------- -
--------------------------
-
-
--- -------------- - --- -----------------
--- ----- - -----
--------------------------------------------------------------- -------- --- -
----- ------- - ----------------------
-- ---------- -
-------
-
-- ------- -
--------------------
-
----- - ------------- -- -
------------------------
-------------- - --- -----------------
------------------------------------------- -- -
----------------------------------------------- - ------------------ -- -
----
-- ----------------------- --------------------------------
-- -------------------------------------- -- --- -----------------
-----
------------
-- --- -- -
-------------------
---
-- -----
---在这个例子中，我们监听输入框的输入事件，并使用一个定时器控制在 500 毫秒内只请求一次数据。当用户快速输入时，我们通过调用 githubSearcher.cancel() 方法取消之前的异步搜索请求，并在 500 毫秒后重新发送一个新的请求。
总结
这篇文章介绍了在 Promise 中实现取消异步操作的方法，主要是通过使用一个 CancelToken 来包装异步操作，并通过其他方式来控制这个 CancelToken，以实现异步操作的取消。此外，我们还给出了一个实际的操作示例代码，希望可以对读者理解和实践取消异步操作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645e5f3a968c7c53b00bee83