在前端开发中,异步操作是很常见的一种操作。为了简化异步操作,ES6 在 Promise 类中封装了一些方法,其中 Promise.all
是一个很常用的方法。本文将详细介绍 Promise.all 的使用方法和使用场景。
Promise.all 的基本用法
首先,我们来看 Promise.all 的基本用法。Promise.all
的作用是将多个 Promise 实例包装成一个新的 Promise 实例。它接受一个数组作为参数,数组的每一项都是一个 Promise 实例。当所有的 Promise 实例都成功时,Promise.all
返回一个新的 Promise 实例,该 Promise 的返回值是一个数组,数组的每一项都是对应 Promise 实例的返回值。
示例代码如下:
const p1 = Promise.resolve('1'); const p2 = Promise.resolve('2'); const p3 = Promise.resolve('3'); Promise.all([p1, p2, p3]).then(values => { console.log(values); // ['1', '2', '3'] });
打印出来的结果是一个包含三个字符串的数组。这里我们使用了三个 Promise 实例,它们都成功了,因此 Promise.all
返回的新 Promise 也成功了,它的返回值是一个包含三个字符串的数组。
如果其中任何一个 Promise 失败,Promise.all
返回的新 Promise 也失败。失败的原因是第一个失败的 Promise 的失败原因。
示例代码如下:
const p1 = Promise.resolve('1'); const p2 = Promise.reject('error'); const p3 = Promise.resolve('3'); Promise.all([p1, p2, p3]).catch(error => { console.log(error); // 'error' });
在这个例子中,第二个 Promise 被 reject,因此 Promise.all
返回的新 Promise 也是 reject 状态,它的失败原因是第二个 Promise 的失败原因。
需要注意的是,Promise.all 返回的新 Promise 的返回值是一个数组,数组中的元素的顺序和传入的 Promise 实例数组中的元素的顺序是一致的。
使用场景
在实际开发中,Promise.all 的使用场景有很多。下面我们来看一些常见的场景。
1. 并行请求多个数据
在一些需要同时请求多个数据的场景下,可以使用 Promise.all
。比如,我们需要从服务器端获取用户信息和用户订单信息,代码如下:
-- -------------------- ---- ------- ----- ----------- - -- -- - ------ ----------------------- -- ----- ------------- - -- -- - ------ ------------------------------ -- --------------------------- ------------------------------- -- - ----- ---------- ----------- - --------- --------------------- ------------ ---展开代码
这里我们使用了 axios 发送两个请求,分别是获取用户信息和获取用户订单信息。将这两个请求包装成 Promise 实例,传入给 Promise.all,等待所有 Promise 实例都成功后,我们就可以拿到两个 Promise 实例的返回值,即用户信息和订单信息。
2. 并发限制的请求
在一些并发请求的场景中,有时候我们需要限制请求数。比如,我们需要从一个列表中获取每个 item 的详情,但是同一时间只能请求一定数量的 item 的详情,否则会导致性能问题。这时可以使用 Promise.all
结合 Promise.race
来实现。
代码实现如下:
-- -------------------- ---- ------- ----- -------- - --- -- -- -- -- -- -- -- --- ----- ------------- - -- ----- ------------- - ---- -- - ------ ----------------------------- -- ----- ------------- - -- -- - ----- -------- - --- --- ----- - -- ----- --------------- - ---- -- - ------ ----------------- -------------- -- - ------------ - -------------- -- ------------ -- - ------------------- --- - ------ --- ----------------- ------- -- - ----- ----------- - -- -- - ----- ------ - --------------- -- --------------- --- ---------- - -------- - -- ------ --- ---------------- - ------------------ ------- - ----- ----------------- - ------------------------ - ------ --------------- ----- ------------------ - ------------ ------- ----------------- ---------- -- -- - ----- -- - ----- - -- ------ -------------------- --- ------------------------------- -------- -- - -------------- -- ------------ -- - -------------- --- -- -------------- --- - ----------------------------- -- - ---------------------- ---展开代码
在这个例子中,我们可以设置 maxConcurrent
的值,表示最多可以同时请求几个 item 的详情信息。当请求数量超过限制时,就需要等待前面的请求完成后再进行。这里我们使用了 Promise.race
来监听每个请求的完成状态,当有请求完成时,就立即发起新的请求。使用 Promise.all
来等待每一轮的请求完成。最终,我们可以拿到所有 item 的详情信息。
总结
在本文中,我们介绍了 Promise.all 的基本用法,并讲述了一些常用的使用场景。使用 Promise.all 可以帮助我们简化代码,避免回调地狱的现象,提高代码的可读性和可维护性。同时,需要注意使用场景和限制并发请求的数量,以避免性能问题。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64b23c7348841e9894e83b0f