如何优雅地在 Promise 中处理多个异步请求
在前端开发中，经常会涉及到多个异步请求的处理，而用传统的回调方式来处理多个异步请求的场景，难以清晰地表达出多个异步请求之间的关系，代码也容易出现回调地狱，难以维护。
而 Promise 是ES6中新增的一种异步处理方式，它可以为我们解决这个问题。在 Promise 中，多个异步请求之间的关系可以以链式的方式表达出来，而且代码也更加清晰优雅。
本文将详细介绍如何使用 Promise 在前端开发中优雅地处理多个异步请求，并提供一些示例代码。希望读者能在阅读本文之后，对 Promise 的使用有更深入的了解，可以在实际开发中更加熟练地运用 Promise 处理多个异步请求。
- Promise 基础
Promise 是一种对异步操作的结果进行处理的方式。它可以在异步操作完成后，将结果或错误信息传递给后续的操作，使得异步操作与同步操作的处理方式一致。 Promise 常见的三个状态是：
- Pending（进行中）: Promise 实例创建后，初始状态为进行中，即未 fulfilled 或 rejected。
- Fulfilled（已成功）：异步操作成功，Promise 会传入一个值作为参数，使 Promise 从“进行中”转为“已成功”状态。
- Rejected（已失败）：异步操作失败，Promise 的状态变为“已失败”，并传入一个错误对象，使 Promise 从“进行中”转为“已失败”状态。
Promise 的基本用法： Promise实例化后，需要调用then方法，添加onResolved和onRejected方法，分别对应Promise实例的两种状态。
new Promise((resolve, reject) => {
…
})
.then(onResolved, onRejected);在then方法返回的又是一个Promise实例时，可以进行链式调用，如下：
fetch('url')
.then(response => response.json())
.then(user => fetch(user.profile))
.then(profile => console.log(profile))
.catch(error => console.error(error));- 串行处理多个异步请求
在实际的开发中，如果需要串行地处理多个异步请求，也就是处理完一个异步请求后再执行下一个异步请求，这时可以通过Promise的链式调用方式来实现。
以发送ajax请求为例，首先发送第一个ajax请求：
ajax('/url1')然后在请求完成以后，再发送第二个ajax请求：
ajax('/url1').then(response1 => {
ajax('/url2')
});这样就可以确保第二个请求会在第一个请求完成后发送，且第二个请求的响应结果会包含在返回的Promise对象的结果中。如果需要继续发送下一个请求，可以继续在then方法中进行调用。
- 并行处理多个异步请求
除了串行处理多个异步请求外，当需要同时处理多个异步请求时，Promise 也可以很好地支持并行处理。通过Promise.all方法，可以将多个Promise实例的结果合并到一起。
例如，有两个ajax请求，需要同时发起：
-- -------------------- ---- ------- ------------- ------------- ------------ --------------- -- - ------------------------ ------------------------ -- ------------ -- - --------------------- ---
Promise.all 方法接收一个数组，该数组包括所有需要并行执行的异步操作。当所有异步操作都完成后，Promise.all 会将所有的异步操作的结果作为一个数组传递给then方法。
需要注意的是，如果其中任意一个异步操作失败，整个Promise.all操作都会失败。这时会立即调用catch方法，并返回错误信息。
- 总结
本文介绍了使用 Promise 在前端开发中优雅地处理多个异步请求的方法。通过串行处理多个异步请求和并行处理多个异步请求的示例代码，希望读者能更好地理解 Promise 的使用，掌握 Promise 处理多个异步请求的技巧，为实际项目的开发提供指导意义。
除了 Promise.all 方法外，Promise 还提供了其他方法，如 Promise.race 方法、Promise.allSettled 方法等。需要根据实际需求选择不同的 Promise 方法，以提高代码的效率和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aba05248841e989476edca