面试会问的 Promise.all()

男娘i 2024-05-24 04:29 66阅读 0赞

## `Promise.all()` ##

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

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

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

![在这里插入图片描述][5ddf7e6496254f4a870c852db6ce33de.png_pic_center]

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

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

![在这里插入图片描述][499213406a0e4ba1b89415a5f7452edb.png_pic_center]

### 输入 ###

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

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

### 手写 `Promise.all` ###

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

*  首先: 判断传入的参数是否为可迭代对象, 关于可迭代对象判断, [?请看MDN这里?][MDN];
 *  其次, 如果是可迭代对象, 判断是否为空, `string` 和 `数组` 通过 `length` 属性判断, `Set` 和 `Map` 通过 `size` 属性判断;
 *  创建两个变量, 分别使用 `resolvedPromiseCount` 和 `resolvedPromiseResult` 用来记录已经完成的 `Promise` 对象的数量和结果;
 *  使用 `Promise.resolve()` 处理可迭代对象中每个值, 如果这个值刚好是 `Promise` 对象, `resolve` 就会原封不动地将这个对象返回; 如果这个值非 `Promise` 对象, 就会创建一个 `resolve` 这个值的 `Promise` 对象.
    
     *  在 `catch` 方法中直接 `reject`;
     *  在 `then` 方法中增加 `resolvedPromiseCount` 的值并将已完成的 `Promise` 对象的结果保存在数组 `resolvedPromiseResult` 的对应位置. 如果 `resolvedPromiseCount` 刚好等于 `length` 调用 `resolve` 返回.
     *  ![在这里插入图片描述][e1a9230c3c694b2b898ea40797d13709.png_pic_center]

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);
          });
        }
      })
    }

![在这里插入图片描述][79fdde71bfa64fc2965be00097446ec5.png_pic_center]

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

[5ddf7e6496254f4a870c852db6ce33de.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/573457174cf2489591417ef4d3e90dbf.png
[499213406a0e4ba1b89415a5f7452edb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/b7ed3bc3c3f1487ea053deb535a4bf04.png
[07b6635852f04abda78cb885479fe3dc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/8e12cd8be9e74008b22bd72a370d0637.png
[MDN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols
[e1a9230c3c694b2b898ea40797d13709.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/8c32b7d175474026a58b4b1404493ac9.png
[79fdde71bfa64fc2965be00097446ec5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/77d1f22136644712bfed81dde20c5bc2.png