面试会问的 Promise.all()

Promise.all()

来看这个的应该都在面试吧~~~😏

Promise.all() 接收一组可迭代的 Promise 作为输入, 返回一个新的 Promise 对象, 其 resolve 回调的结果是输入的所有 Promise 的结果组成的数组.

如果输入的参数为空的可迭代对象, 或者所有输入的 Promise 都变成已完成状态, 那么返回的 Promise 也会变成已完成状态.

const promise1 = new Promise(resolve => {
  setTimeout(() => {
    resolve('😀');
  }, 1000);
});
const promise2 = Promise.resolve(2);
const promise3 = 1;


Promise.all([promise1, promise2, promise3])
.then((result) => {
  console.log('result is', result);
});

// 空的可迭代对象
Promise.all(new Set())
.then(result => {
  console.log('new Set() result is', result);
});

在这里插入图片描述

📕虽然 promise1 最后才变成已完成状态, 但是在返回的结果中, 它仍然是第一个. 返回结果中的位置和其完成先后没关系, 和其在传入 all() 的位置有关系

不过一旦输入的任何 Promise 对象变成 rejected 或者输入的参数非可迭代对象(比如 null 或者 number 类型),那么返回的 Promise 立即 reject, 并且 reject 回调的结果是第一个 reject 的信息或者报错信息.

const promise4 = new Promise(resolve => {
  setTimeout(() => {
    resolve(100);
  }, 10000);
})
const promise5 = Promise.reject(200);

Promise.all([promise4, promise5])
.then(result => {
  console.log('我不会执行的');
})
.catch(err => {
  console.log('糟糕, ', err)
})

在这里插入图片描述

输入

Promise.all() 接收的是可迭代对象, 而不仅仅是数组, 数组虽然是可迭代对象, 但是 set, string 等都属于可迭代对象. 因此 Promise.all('asd') 会输出什么呢?
在这里插入图片描述

哈哈😄, 这是因为 asd 字符串类型可迭代的. 如果我们组成可迭代对象的数据(a, s, d)不是 Promise 对象, 就会被 resolve 变成已完成状态.

手写 Promise.all

面试中问到最多的就是被手写 Promise.all 实现

  • 首先: 判断传入的参数是否为可迭代对象, 关于可迭代对象判断, 👉请看MDN这里👈;
  • 其次, 如果是可迭代对象, 判断是否为空, string数组 通过 length 属性判断, SetMap 通过 size 属性判断;
  • 创建两个变量, 分别使用 resolvedPromiseCountresolvedPromiseResult 用来记录已经完成的 Promise 对象的数量和结果;
  • 使用 Promise.resolve() 处理可迭代对象中每个值, 如果这个值刚好是 Promise 对象, resolve 就会原封不动地将这个对象返回; 如果这个值非 Promise 对象, 就会创建一个 resolve 这个值的 Promise 对象.
    • catch 方法中直接 reject;
    • then 方法中增加 resolvedPromiseCount 的值并将已完成的 Promise 对象的结果保存在数组 resolvedPromiseResult 的对应位置. 如果 resolvedPromiseCount 刚好等于 length 调用 resolve 返回.
    • 在这里插入图片描述
Promise.myAll = function (iterable) {
  return new Promise((resolve, reject) => {
    if (typeof iterable[Symbol.iterator] !== 'function') {
      reject(new Error('参数必须是可迭代类型对象'));
    }
    let length = iterable.length || iterable.size;
    if (length === 0) {
      resolve([]);
    }
    let resolvedPromiseCount = 0;
    let resolvedPromiseResult = [...' '.repeat(iterable.length)]
    let i = 0;
    for (let item of iterable) {
      Promise.resolve(item)
      .then(result => {
        resolvedPromiseCount++;
        resolvedPromiseResult[i++] = result;
        if (resolvedPromiseCount === length) {
          resolve(resolvedPromiseResult);
        }
      })
      .catch(err => {
        reject(err);
      });
    }
  })
}

在这里插入图片描述

谢谢你看到这里, 祝福你面试顺利😀

前端面试中,Promise.all() 是一个常见的题。它是一个用于处理多个 Promise 对象的方法,返回一个新的 Promise 对象。根据引用所述,Promise.all() 方法接收一个 promise 的 iterable 类型的输入(例如数组),并且只返回一个 Promise 实例。当所有输入的 promise 都成功执行时,Promise.all() 返回的 Promise 对象的 resolve 回调会传递一个包含所有 promise 结果的数组。如果输入的 promise 中有任何一个失败或者输入不合法的 promisePromise.all() 返回的 Promise 对象的 reject 回调会立即抛出错误,并且 reject 的是第一个抛出的错误信息[^2]。 以下是一个示例,演示了如何使用 Promise.all() 方法: ```javascript const promise1 = Promise.resolve(3); const promise2 = 42; const promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 'foo'); }); Promise.all([promise1, promise2, promise3]) .then(values => { console.log(values); // 输出:[3, 42, 'foo'] }) .catch(error => { console.error(error); // 如果有任何一个 promise 失败,会立即抛出错误 }); ``` 在上面的示例中,我们创建了三个 Promise 对象:promise1、promise2 和 promise3。promise1 是一个已经解决的 Promisepromise2 是一个普通的值,promise3 是一个在 100 毫秒后解决的 Promise。我们将这三个 Promise 对象作为参数传递给 Promise.all() 方法。当所有的 Promise 都成功执行时,Promise.all() 返回的 Promise 对象的 resolve 回调会传递一个包含所有 promise 结果的数组。在这个示例中,我们通过 then() 方法获取到了这个数组,并将其打印出来。如果有任何一个 Promise 失败,Promise.all() 返回的 Promise 对象的 reject 回调会立即抛出错误,并且 reject 的是第一个抛出的错误信息。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值