Promise.all的使用
- Promise.all() 方法接收一个promise的 iterable (可迭代,例如Array, Set, Map)类型
- resolve回调的结果是一个数组,且这个回调是在所有输入的promise的resolve回调都结束时执行,或者输入的可迭代类型里没有promise了的时候
- reject回调执行是只要任何一个输入的promise的reject回调执行或者输入不合法的promise就会立即抛出错误。并且reject的是第一个抛出的错误信息。
- 且回调的顺序是和输入的顺序有关,即使后面的更快,在回调时的结果还是严格按照输入的顺序来的。
例:
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 500, 'one');
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 300, 'two');
});
const promise3 = new Promise((resolve, reject) => {
setTimeout(reject, 400, 'three');
});
const promise4 = new Promise((resolve, reject) => {
setTimeout(reject, 500, 'four');
});
Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values);
});
// [ 'one', 'two' ],即使 two 比 one 先 resolve
Promise.all([promise1, promise2, promise3, promise4]).then((value) => {
console.log(value);
}).catch(err=>console.log(err));
// three,只要有一个抛出错误了
使用场景
例如,有些页面需要请求多个接口渲染数据,而且希望全部请求完再一起渲染。这个时候就可以使用 .all 去批量请求了。
实现一个函数实现最大的请求控制数
Promise.race
- 接收一个promise的 iterable (可迭代,例如Array, Set, Map)类型
- 一旦迭代器中的某个promise解决或拒绝,返回的 promise就会解决或拒绝。
简单来说就是:无论完成还是拒绝,只要谁的状态先确定了谁就回调谁
例如:实现一个函数来处理请求超时
例如:
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 500, 'one');
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 300, 'two');
});
const promise3 = new Promise((resolve, reject) => {
setTimeout(reject, 100, 'three');
});
Promise.race([promise1, promise2]).then((value) => {
console.log(value);
// 两个都resolve了,但是 promise2 更快
});
Promise.race([promise1, promise2, promise3]).then((value) => {
console.log(value);
}).catch(err=>console.log(err));
// promise3 更快地 转变为 rejected 状态,所以走了 .catch
使用场景
- 有个接口要请求,但是要判断是否超时,所以就可以把接口和setTimeout一起放进 .race 中。如果setTimeout 执行了,请求还未执行,就可以通过 setTimeout 去告知用户
- 有多个接口分别部署在不同的服务器,但都是同一个功能。这个时候也可以用 .race 谁先最快地返回就执行谁的回调。
网友评论