学习链接

40＋ 大厂常考 JS 手写题系列【摸鱼必备】

死磕 36 个 JS 手写题（搞懂后，提升真的大）

网道教程：Promise.all()

Promise.all

Promise.all - 图1

补充：

  1. // Little known fact: Array.prototype itself is an array:
  2. Array.isArray(Array.prototype); // true
  1. Promise.myAll = promiseArr => {
  2.     return new Promise((resolve, reject) => {
  3.         if (!promiseArr[Symbol.iterator]) {
  4.             throw new TypeError(`${promiseArr} is not iterable`) // 需要iterator接口
  5.         }
  7.         if (!Array.isArray(promiseArr)) {
  8.             promiseArr = Array.from(promiseArr); // 根据 iterator 接口转为数组
  9.         }
  11.         let result = [], count = 0; // count 记录fulfilled数量
  13.         promiseArr.forEach((p, i) => {
  14.             Promise.resolve(p).then(res => { // 转为 Promise 对象
  15.                 count++; // 进入then的回调, fulfilled的实例数加一
  16.                 result[i] = res;
  18.                 if (count === promiseArr.length) {
  19.                     resolve(result);
  20.                 }
  21.             }, err => {
  22.                 reject(err);
  23.             })
  24.         })
  25.     })
  26. }

测试

  1. const promise1 = Promise.resolve(3);
  2. const promise2 = 42;
  3. const promise3 = new Promise((resolve, reject) => {
  4.     setTimeout(resolve, 1000, 'foo');
  5. });
  7. Promise.myAll([promise1, promise2, promise3]).then(val => console.log(val));
  8. // [3, 42, 'foo']
  9. Promise.all([promise1, promise2, promise3]).then(val => console.log(val));
  1. const p1 = new Promise((resolve, reject) => {
  2.     resolve('hello');
  3. })
  4. .then(result => result)
  5. .catch(e => e);
  7. const p2 = new Promise((resolve, reject) => {
  8.     throw new Error('报错了');
  9. })
  10. .then(result => result)
  11. .catch(e => e);
  13. Promise.myAll([p1, p2])
  14.     .then(result => console.log(result))
  15.     .catch(e => console.log(e));
  16. // ["hello", Error: 报错了]
  17. Promise.all([p1, p2])
  18.     .then(result => console.log(result))
  19.     .catch(e => console.log(e));
  1. // 验证 iterator 接口
  2. const p1 = Promise.resolve(3);
  3. const p2 = 42;
  4. const p3 = new Promise((resolve, reject) => {
  5.     setTimeout(resolve, 1000, 'foo');
  6. });
  8. const promiseArr = [p1, p2, p3];
  9. let num = 0;
  11. const promiseIterator = {
  12.     [Symbol.iterator]() {
  13.         return {
  14.             next() {
  15.                 if (num < promiseArr.length) {
  16.                     return { done: false, value: promiseArr[num++] }
  17.                 }
  18.                 return { done: true, value: undefined }
  19.             }
  20.         }
  21.     }
  22. };
  24. // Promise.All(promiseIterator)
  25. //     .then(result => console.log(result))
  26. //     .catch(e => console.log(e));
  27. // [3, 42, 'foo']
  28. Promise.myAll(promiseIterator)
  29.     .then(result => console.log(result))
  30.     .catch(e => console.log(e));