Promise.all 无响应情况处理
当前前端开发中，异步编程已经成为了必不可少的一部分。而 Promise.all 作为一个能够在多个异步操作完成后返回的 promise 对象，是我们开发中非常常见的一个工具函数。但是，如果在遇到一些异步操作长时间没有结束的情况下，可能会导致 Promise.all 这个 promise 对象一直处于 pending 状态，从而导致出现无响应的情况。针对这种情况，本文将介绍如何处理 Promise.all 的无响应情况。
- 实际案例
由于个人原因，有时需要从 Gitlab 上拉取一个很大的项目代码，然后通过 npm 安装依赖。这个过程可能会非常慢，需要等待很长时间。在这个过程中，我的代码中使用了 Promise.all 来等待这些异步操作全部完成后再一次性处理。但是由于某种原因，有时这些异步操作会非常慢，导致 Promise.all 一直处于 pending 状态，从而导致整个程序无响应，不能继续执行。这时候就需要针对这种情况进行处理了。
- 处理思路
为了处理 Promise.all 的无响应情况，我们需要对 Promise.all 进行超时控制。如果 Promise.all 中任意一个 Promise 对象在规定时间内没有 resolve 或者 reject，我们就可以手动把 Promise.all 这个 promise 对象的状态变成 reject，并同时给出一个错误提示信息。这样处理之后，就不会出现程序无响应的情况了。
- 代码实现
下面是 Promise.all 无响应情况处理的示例代码：
-- -------------------- ---- -------
---
- ------ ------- -------- ------- ----
- ------ -------- ------- --------
- ------- --------- ---- ------- --
--
-------- ------------------------------- -------- -
------ --- ----------------- ------- -- -
----- --- - ---------------
--- ----- - -
--- ----------- - -----
----- ------- - --- ----------
--- ---- - - -- - - ---- ---- -
--------------------------------------- -- -
-- ------------- -
------
-
---------- - ---
-------
-- ------ --- ---- -
----------------
-
-------------- -- -
-- ------------- -
------
-
----------- - ----
---------- -------------- ---- -------- ---- -----------------
--
-
------------- -- -
-- ------------- -
------
-
----------- - ----
---------- ------------------ ------- ----- ---------------
-- --------
--
-在这个示例代码中，我们定义了一个名为 promiseAllWithTimeout 的函数。该函数接收两个参数：promises 和 timeout。promises 是 Promise 对象数组，timeout 是超时时间，单位是毫秒。
在函数内部，我们首先定义了一些变量：len 表示 Promise 对象数组的长度；count 表示已经 resolve 或者 reject 的 Promise 对象个数；hasRejected 表示是否已经有 Promise 对象 reject；results 是一个数组，用来存储每个 Promise 对象 resolve 的结果。
接下来，我们遍历 Promise 对象数组，对每个 Promise 对象进行 resolve 或者 reject 处理。如果出现了一个 Promise 对象 reject，就把 hasRejected 设置为 true，并手动抛出一个错误信息。如果所有 Promise 对象都 resolve 或者 reject 了，就把 results 这个数组作为参数，手动调用 resolve 函数。
最后，我们通过 setTimeout 函数设定一个超时时间。如果超时时间到了还有 Promise 对象没有 resolve 或者 reject，就把 hasRejected 设置为 true，并手动抛出一个错误信息。
使用该函数的方法和 Promise.all 一样，示例代码如下：
const promises = getPromises()
promiseAllWithTimeout(promises, 5000).then((results) => {
// 处理所有 Promise 对象 resolve 的结果
}).catch((err) => {
console.error(err.message)
})- 结论
通过本文的实现，我们实现了对 Promise.all 的无响应情况进行了处理。在我们的处理方法中，我们对 Promise.all 进行了超时控制，并在超时之后手动抛出一个错误信息。这个方法可以避免出现程序无响应的情况，并且在出现问题时也可以及时给用户提供错误提示信息，提高了应用的友好度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67174cbfad1e889fe220b33e