JS手写Promise.all方法

测试例子

 var f11 = Promise.resolve("111");
 var f22 = Promise.resolve("222");
 var f33 = Promise.resolve("333");
 // var f33 = Promise.reject("333");

1、用原生 Promise 实现

逻辑说明:接收一个由多个promise方法组成的数组,异步按数组顺序调用。
如果全部成功
成功计数变量+1,
将成功的promise返回值插入到临时数组中,
(调用的数量 == 成功的数量) 则把临时数组返回。
如果有一个失败则程序终止并抛出错误的promise结果,前面成功的不输出

      function promiseAll(arr) {
        return new Promise((resolve, reject) => {
          let fullLen = 0; // 成功数量
          let resArr = []; // 存储成功的结果
          for (let i = 0; i < arr.length; i++) {
            arr[i].then(
             (val) => {
                fullLen++; // 成功数量+1
                resArr[i] = val; // 把结果存储到临时数组中
                // 成功的数量 和 传入数量一致代表全部都成功了,将存储结果数组返回出去
                if (fullLen == arr.length)  resolve(resArr);
              },
              // 如果其中一个promise错误则返回错误信息并终止循环,同时在它前面成功的promise返回值都不返回
              (reson) => reject(reson) 
            );
          }
        });
      }
      
     // 测试
      promiseAll([f11, f22, f33])
        .then((val) => {
          console.log(val, "res"); //打印 [111, 222, 333]
        })
        .catch((rej) => {
          console.log(rej, "rej");
        });

2、用async await 实现

逻辑说明:
初始一个存储数组
将数组中每个promise成功返回的值插入到resArr中,循环完将数组返回出去。
如果其中一个错误,则抛出报错的promise原因。
提示:for of 是取数组元素的value,for in则是key(常考面试题)
示例:arr 等同于 [ 0:f11, 1:f22, 2:f33 ] ,所以循环中的promis就是f11,f22,f33。即数组元素的value,下标则是key。

      async function promiseAll(arr) {
        try {
          let resArr = [];
          for (let promis of arr) {
            resArr.push(await promis);
          }
          return resArr; 
        } catch (error) {
          return error;
        }
      }

 	   // 测试
 	   promiseAll([f11, f22, f33])
        .then((val) => {
          console.log(val, "res"); //打印 [111, 222, 333]
        })
        .catch((rej) => {
          console.log(rej, "rej");
        });

你可能感兴趣的:(JavaScript,javascript,前端,开发语言)