在前端开发中，Promise 是异步编程中必不可少的一种语法。而在 ES12 中，Promise 的链式调用得到了进一步的优化。本文将详细讲解 ES12 中 Promise 链式调用的优化手段，并附上示例代码，帮助读者更好地理解。
为什么要使用 Promise 链式调用？
在之前的版本中，使用 Promise 非常常见，但是如果是多个异步操作之间的依赖关系，就需要使用 then 链式调用来解决这个问题。以 Axios 为例：
-- -------------------- ---- -------
------------------
-------------- ---------- -
-- ------ -------
----------------------
--
--------------- ------- -
-- ------ -----
-------------------
--
-------------- -- -
-- ------ --------
---上面的代码中，我们可以看到初始的 axios 请求会返回一个 Promise，我们可以继续使用一个 then 方法来添加一个回调函数来处理结果。但在真实世界应用程序中，我们可能需要更多的操作，比如针对多个请求的响应，将它们组合起来或将它们的结果转换为另一种形式。这时就需要使用链式调用。使用链式调用可以很好地解决以上问题，并且还能够方便地处理错误。
ES12 中 Promise 链式调用的优化手段
在 ES12 中，有两个新的优化来改善对 Promise 链式调用的支持：Promise.allSettled 和 Promise.any。
1. Promise.allSettled
Promise.allSettled() 是一个新的实用程序函数，它返回所有 Promise 对象的结果，而不管它们是否在应用程序中引发了错误。例如：
Promise.allSettled([
Promise.resolve(1),
Promise.reject(0),
Promise.resolve(2)
])
.then(function (results) {
console.log(results);
});在上面的代码片段中，即使第二个 Promise 状态变为 rejected，Promise.allSettled() 也会返回所有的结果。这为处理多个异步操作的复杂性提供了更多的支持。
2. Promise.any
Promise.any() 是新的实用程序函数，它满足多个 Promise 之一被 resolved 的情况，而忽略任何被 rejected 的 Promise，从而优化异步调用的行为。例如：
const p1 = Promise.reject(0);
const p2 = new Promise(resolve => setTimeout(resolve, 100, 'quick'));
const p3 = new Promise(resolve => setTimeout(resolve, 500, 'slow'));
Promise.any([p1, p2, p3]).then((value) => {
console.log(value);
});在上面的代码片段中，尽管 p1 被 reject，但结果依然是 quick。
如何结合这些工具来避免链式调用？
在上述示例中，我们看到了有两个新的方法来优化对于 Promise 链式调用的支持。但是，很多时候，链式调用的优势在于可以顺序执行一系列的异步操作，并能够保持代码整洁。在某些情况下，我们需要避免使用长长的 then 链式调用，以免降低代码的可读性。我们可以结合使用这些新工具和 async / await 来提高代码的可读性和可维护性。
例如：
-- -------------------- ---- -------
----- -------- ------------------- -
--- -
----- ------------ ---------- - ----- --------------------
---------------------
-------------------
---
------ ------- ----------- ----------------- ---------- -----------------
- ----- ----- -
-----------------
-
-
-------------------
--------------- -- -
-----------------------
--
---------- -- -
--------------------- - -----
---在上述代码片段中，我们使用 Promise.allSettled() 来解决了针对多个请求的响应的依赖关系。async/await 是一个从 ES8 中引入的新语法，它生成了可读性更好的代码，使我们能够以更直观和线性的方式管理异步代码。
Conclusion
在本文中，我们介绍了 ES12 中针对 Promise 链式调用的两个优化手段，以及如何使用它们来提高代码的可读性和可维护性。同时，结合 async/await 可以更加轻松地管理异步代码，以便将代码写成更清晰、更直观的方式。希望本文对读者起到了帮助作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67820cec935627c900f4f8a2
