在前端开发中，经常需要处理一些需要并发执行的任务，比如同时加载多张图片、异步请求多个接口等。在处理这些任务时，我们有多种方案，Promise 中的任务并发执行方法便是其中一种。
Promise 中的任务并发执行方法
Promise 是 JavaScript 中用于管理异步操作的对象，其可使异步操作在返回结果之后进行相应的处理。在 Promise 中，我们可以使用 Promise.all() 方法来实现任务并发执行，它可以让我们并发地处理多个 Promise，并在所有 Promise 处理完成后同时获取所有结果。
Promise.all() 方法接受一个 Promise 对象数组，并返回一个新的 Promise 对象。当所有 Promise 完成时，该新 Promise 将以一个数组参数返回结果，结果数组中的结果顺序与传入 Promise 数组时的顺序对应。
下面是一个示例：
const promise1 = Promise.resolve(1); const promise2 = Promise.resolve(2); const promise3 = Promise.resolve(3); Promise.all([promise1, promise2, promise3]) .then((result) => { console.log(result); // [1, 2, 3] });
上述示例中的 Promise.all() 方法接受一个包含三个 Promise 对象的数组，并返回一个新的 Promise 对象，该对象在所有 Promise 处理完成后调用回调函数并传递一个结果数组。结果数组的元素顺序和传入数组的元素顺序一致。
深度探究
在实际开发中，我们需要处理的任务可能比上述示例中的示例更为复杂，例如同时加载多张图片或者同时请求多个接口。针对这种情况，我们可以使用 Promise.all() 方法来实现任务并发执行。
例如，下面是一个加载多张图片的示例代码：
-- -------------------- ---- ------- -------- ---------------------- - ----- -------- - --------------- -- - ------ --- --------------- -- - ----- --- - --- -------- ---------- - -- -- ------------- ------- - ---- --- --- ------ ---------------------- - --------------- --------------------------------- --------------------------------- -------------------------------- -------------- -- - -------------------- ---展开代码
上述示例中的 preloadImages() 函数接受一个图片 URL 数组，使用 Array.map() 方法将图片 URL 转换成 Promise 对象，并将所有 Promise 对象传递给 Promise.all() 方法来实现任务并发执行。
当所有加载完成后，Promise.all() 方法会以一个数组参数返回结果，结果数组中的结果顺序与传入 Promise 数组时的顺序对应，这是因为在 preloadImages() 函数中，img.onload() 回调函数会在图片加载完成后调用 resolve() 函数，Promise 状态被改变并返回结果，而 Promise.all() 方法会等待所有的 Promise 都改变状态后再返回结果。
实际上，Promise.all() 还支持返回的结果顺序和传入 Promise 数组时的顺序不一致的情况，这是因为 Promise 状态改变的原因可能是不同的，例如部分 Promise 可能因为超时而失败，而这个事件可能在其他 Promise 之前发生。
学习意义与指导意义
Promise 中的任务并发执行方法可以让我们轻松地实现并发的异步操作，减小代码复杂度，并提升代码效率。在实际开发中，我们需要合理使用 Promise，并在遇到并发任务时使用 Promise.all() 方法来避免阻塞线程，提升应用性能。
同时，需要注意的是，在使用 Promise.all() 方法时应该注意 Promise 数组的数量，过多的 Promise 可能会导致堵塞线程，而在使用时选择合适的 Promise 数量可使代码更为优雅。
最后，需要注意的是在使用 Promise 的过程中需要处理 Promise 的错误和异常情况。Promise.all() 方法会在所有 Promise 处理完成后将 Promise 错误参数传递给回调函数，我们应该在回调函数中使用 catch() 方法捕获 Promise 错误，并避免可能的异常情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c43a746e1fc40e36d1eba2
