在使用 ES8 的 Promise.all() 方法时，有时会遇到 “TypeError: Cannot read property 'then' of undefined” 的错误。这种错误通常是由于 Promise.all() 方法的参数中包含了 undefined 或非 Promise 对象所导致的。在本篇文章中，我们将详细介绍这种错误的原因和解决方法，并给出相关的示例代码。
Promise.all() 方法的用途
Promise.all() 方法是 ES6 中引入的一种 Promise 方法，它可以接受一个 Promise 对象数组作为参数，并在所有 Promise 对象都成功时返回一个新的 Promise 对象。新的 Promise 对象的 resolve() 方法将会接收到一个包含所有 Promise 对象结果的数组。如果其中任意一个 Promise 对象失败，那么新的 Promise 对象也将失败，并返回一个 reject()。
TypeError 的原因
当 Promise.all() 方法的参数中包含了 undefined 或非 Promise 对象时，就会出现 “TypeError: Cannot read property 'then' of undefined” 的错误。这是因为 Promise.all() 方法要求参数中的所有元素都是 Promise 对象，而 undefined 或非 Promise 对象无法调用 then() 方法，因此会出现这种错误。
解决方法
为了避免出现 “TypeError: Cannot read property 'then' of undefined” 的错误，我们需要在使用 Promise.all() 方法时，确保参数中只包含 Promise 对象。以下是一些示例代码，可以帮助我们更好地理解这种错误和解决方法。
示例 1：参数中包含 undefined
-- -------------------- ---- -------
----- -------- - -------------------
----- -------- - -------------------
----- -------- - -------------------
----- -------- - ----------
---------------------- --------- --------- ----------
------------ -- -
--------------------
--
------------ -- -
---------------------
---在这个示例中，我们在 Promise.all() 方法的参数中包含了一个 undefined。这将导致 Promise.all() 方法抛出 TypeError 的错误。为了解决这个问题，我们可以在传递参数之前，将 undefined 过滤掉。
-- -------------------- ---- -------
----- -------- - -------------------
----- -------- - -------------------
----- -------- - -------------------
----- -------- - ----------
----- -------- - ---------- --------- --------- --------------------------
---------------------
------------ -- -
--------------------
--
------------ -- -
---------------------
---在这个示例中，我们使用了 filter() 方法将 undefined 过滤掉，这样就避免了出现 TypeError 的错误。
示例 2：参数中包含非 Promise 对象
-- -------------------- ---- -------
----- -------- - -------------------
----- -------- - -------------------
----- -------- - -------------------
----- -------- - ---- - ---------
---------------------- --------- --------- ----------
------------ -- -
--------------------
--
------------ -- -
---------------------
---在这个示例中，我们在 Promise.all() 方法的参数中包含了一个非 Promise 对象。这将导致 Promise.all() 方法抛出 TypeError 的错误。为了解决这个问题，我们可以使用 Promise.resolve() 方法将非 Promise 对象转换为 Promise 对象。
-- -------------------- ---- -------
----- -------- - -------------------
----- -------- - -------------------
----- -------- - -------------------
----- -------- - ---- - ---------
----- -------- - ---------- --------- --------- ---------------------------
---------------------
------------ -- -
--------------------
--
------------ -- -
---------------------
---在这个示例中，我们使用了 Promise.resolve() 方法将非 Promise 对象转换为 Promise 对象，这样就避免了出现 TypeError 的错误。
结论
在使用 Promise.all() 方法时，我们需要确保它的参数中只包含 Promise 对象。如果参数中包含了 undefined 或非 Promise 对象，就会出现 “TypeError: Cannot read property 'then' of undefined” 的错误。为了解决这个问题，我们可以使用 filter() 方法将 undefined 过滤掉，或者使用 Promise.resolve() 方法将非 Promise 对象转换为 Promise 对象。这样就能够保证 Promise.all() 方法的正常运行，避免出现 TypeError 的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6758f5e262956301acd3987b