在前端开发中，使用 Promise 对象来处理异步请求是非常常见的。每当 Promise 对象进入 fulfilled 状态时，回调函数就会被调用。然而，在回调函数内，我们很容易碰到请求多次的问题。这不仅造成性能上的浪费，还可能导致一些错误发生。那么如何防止 Promise 回调函数内请求多次呢？
Promise 特点
在探讨如何防止 Promise 回调函数内请求多次之前，我们需要先了解 Promise 的特点。Promise 一般具有以下几个特点：
Promise 对象状态不可逆，一旦进入某种状态，就不会再发生改变。
Promise 对象的 then() 方法只会在 Promise 对象的状态发生变化后执行，一旦执行完 then() 方法后，Promise 对象和它的回调函数之间就没有关联了。
基于以上特点，我们可以通过 Promise 对象的状态变化，来防止 Promise 回调函数内请求多次。
使用 Promise 链解决
Promise 链是一种基于 Promise 串行执行的方式，它的执行顺序非常直观，也有很高的可读性。而且使用 Promise 链可以非常方便地解决 Promise 回调函数内请求多次的问题。具体代码如下：
-- -------------------- ---- -------
--- --------- - ------
-------- --------- -
-- ----------- -
------ ------------------ ----------------
-
--------- - -----
------ ------------------------ -- -
------ ----------------
------------- -- -
--------- - ------
---
-以上代码做了两件事情：
如果正在请求中，则直接返回一个 Promise.reject()，避免了多次请求。
使用 finally() 回调函数，在请求成功或者请求失败后置 isLoading 为 false，确保下一次请求能够正常发送。
使用 class 封装解决
另一种比较优雅的方式是使用 class 封装，将 isLoading 状态和 promise 对象一起封装成一个类，并且在类内对请求进行控制。
-- -------------------- ---- -------
----- -------------- -
------------- -
-------------- - ------
------------ - -----
-
------------ -
-- ---------------- -
------ ------------------ ----------------
-
-------------- - -----
------------ - ------------------------ -- -
------ ----------------
------------- -- -
-------------- - ------
---
------ -------------
-
-------- -
-- -------------- -
---------------------
------------ - -----
-------------- - ------
-
-
-我们可以在构造函数中初始化 isLoading 和 promise 对象。在 request() 方法内，如果 isLoading 为 true，则直接返回 Promise.reject()。如果 isLoading 为 false，则将 isLoading 置为 true，执行 fetch 请求，并在 finally() 回调函数内将 isLoading 置为 false。在 cancel() 方法内，我们可以取消正在执行的 Promise 对象，从而停止正在请求中。
使用闭包封装解决
理论上，闭包作为一种非常强大的方式，可以应对绝大多数的应用场景。通过使用闭包，可以很方便地封装请求。而更重要的是，它没有类似于 class 的那些概念，更简洁、直观。下面是一个使用闭包封装的请求示例：
-- -------------------- ---- -------
--- ------- - --- -- -
--- --------- - ------
--- ------- - -----
------ ------------- -
-- ----------- -
------ ------------------ ----------------
-
--------- - -----
------- - ------------------------ -- -
------ ----------------
------------- -- -
--------- - ------
---
------ --------
-
-----以上代码使用了箭头函数和 IIFE（Immediately Invoked Function Expression）的结合，创建了一个闭包，将 isLoading 和 promise 封装在内部。在主函数内部，我们通过判断 isLoading 变量，避免了多次请求的问题，并且使用 finally() 回调函数，在请求成功或者请求失败后将 isLoading 置为 false。
总结
在本文中，我们探讨了如何防止 Promise 回调函数内请求多次。首先我们了解了 Promise 的特点，然后通过使用 Promise 链、class 封装和闭包封装等方式，解决了 Promise 回调函数内请求多次的问题。希望本文能够帮助到大家，让我们写出更高效、优雅的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649e6d1048841e9894aeea84