实现 Promise.allPromise.all = function (arr) { // 实现代码}
发布日期:2024-02-09 19:29:28 浏览次数:127 分类:技术文章

本文共 2659 字,大约阅读时间需要 8 分钟。

实现 Promise.all

Promise.all = function (arr) { // 实现代码}

解析:

核心思路

①接收一个Promise实例的数组或具有Iterator接口的对象作为参数

②这个方法返回一个新的promise对象,

③遍历传入的参数,用Promise.resolve()将参数"包一层",使其变成一个promise对象

④参数所有回调成功才是成功,返回值数组与参数顺序一致

⑤参数数组其中一个失败,则触发失败状态,第一个触发失败的Promise错误信息作为Promise.all的错误信息。

实现代码

一般来说,Promise.all 用来处理多个并发请求,也是为了页面数据构造的方便,将一个页面所用到的在不同接口的数据一起请求过来, 不过,如果其中一个接口失败了,多个请求也就失败了,页面可能啥也出不来,这就看当前页面的耦合程度了~

function promiseAll(promises) {  return new Promise(function(resolve, reject) {    if(!Array.isArray(promises)){        throw new TypeError(`argument must be a array`)    }    var resolvedCounter = 0;    var promiseNum = promises.length;    var resolvedResult = [];    for (let i = 0; i < promiseNum; i++) {      Promise.resolve(promises[i]).then(value=>{        resolvedCounter++;        resolvedResult[i] = value;        if (resolvedCounter == promiseNum) {            return resolve(resolvedResult)          }      },error=>{        return reject(error)      })    }  })}// testlet p1 = new Promise(function (resolve, reject) {    setTimeout(function () {        resolve(1)    }, 1000)})let p2 = new Promise(function (resolve, reject) {    setTimeout(function () {        resolve(2)    }, 2000)})let p3 = new Promise(function (resolve, reject) {    setTimeout(function () {        resolve(3)    }, 3000)})promiseAll([p3, p1, p2]).then(res => {    console.log(res) // [3, 1, 2]})

简易版

Promise.myAll = function(promiseArr) {  return new Promise((resolve, reject) => {    const ans = [];    let index = 0;    for (let i = 0; i < promiseArr.length; i++) {      promiseArr[i]      .then(res => {        ans[i] = res;        index++;        if (index === promiseArr.length) {          resolve(ans);        }      })      .catch(err => reject(err));    }  })}

终极版

// 输入不仅仅只有Arrayfunction promiseAll (args) {  return new Promise((resolve, reject) => {    const promiseResults = [];    let iteratorIndex = 0;    // 已完成的数量,用于最终的返回,不能直接用完成数量作为iteratorIndex    // 输出顺序和完成顺序是两码事    let fullCount = 0;    // 用于迭代iterator数据    for (const item of args) {      // for of 遍历顺序,用于返回正确顺序的结果      // 因iterator用forEach遍历后的key和value一样,所以必须存一份for of的 iteratorIndex      let resultIndex = iteratorIndex;      iteratorIndex += 1;      // 包一层,以兼容非promise的情况      Promise.resolve(item).then(res => {        promiseResults[resultIndex] = res;        fullCount += 1;        // Iterator 接口的数据无法单纯的用length和size判断长度,不能局限于Array和 Map类型中        if (fullCount === iteratorIndex) {          resolve(promiseResults)        }      }).catch(err => {        reject(err)      })    }    // 处理空 iterator 的情况    if(iteratorIndex===0){      resolve(promiseResults)    }  }  )}if (!Promise.all) Promise.all = promiseAll;

转载地址:https://blog.csdn.net/m0_72345017/article/details/128316632 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:实现 Promise.all,所有 Promise 成功返回成功,一个失败返回失败
下一篇:实现 PC1 PC2 PC3 间的通讯

发表评论

最新留言

哈哈,博客排版真的漂亮呢~
[***.90.31.176]2024年02月25日 15时28分42秒