关于promise.all()的使用及说明

 更新时间:2023年04月25日 09:15:09   作者:微笑的鱼_  
这篇文章主要介绍了关于promise.all()的使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

关于promise.all()的使用

Promise.all可以将多个Promise实例包装成一个新的Promise实例。

同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值。

关键代码:将所有异步操作存储到数组pros中,Promise.all(pros)执行所有异步操作

let pros = []
data.forEach(element => {
    pros.push( this.getJsonFile(element.json,element.fileName) )
});
Promise.all(pros).then(val => {
    this.fontsList = [...val]
})

示例:

// 获取字体所有json文件展示
getIconFonts(isFresh) {
    req.post(window.context.uc+`/system/file/v1/queryIconFiles`).then(rep => {
        if(rep && rep.data) {
            // 将所有异步操作存储到数组pros中
            let pros = []
            data.forEach(element => {
                pros.push( this.getJsonFile(element.json,element.fileName) )
            });
            // 执行所有异步操作后处理数据
            Promise.all(pros).then(val => {
                this.fontsList = [...val]
                this.uploadFonts = [...this.fontsList]
            })
        }
    });
},
// 通过id获取json文件
getJsonFile(fileId, fileName) {
    return new Promise((resolve, reject) => {
        req.get(window.context.uc +'/system/file/v1/preview?fileId=' + fileId).then(rep => {
            if(rep && rep.data) {
                let data = {
                    fileName,
                    ...rep.data
                }
                // 返回处理后的数据
                resolve(data)
            }
        })
    })
}

Promise.all实现限制并发请求函数

Promise.all 的简单解释

// 当以下数组中promise1, promise2, promise3都resolve之后,触发promise.all的then函数。
Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});

需求解释

所谓并发请求,即有待请求接口100个,限制每次只能发出10个。即同一时刻最多有10个正在发送的请求。

每当10个之中有一个请求完成,则从待请求的接口中再取出一个发出。保证当前并发度仍旧为10。

直至最终请求完成。

设计思路

简单思路如下:(假设并发请求函数名字为limitedRequest)

  • 设定一个数组(命名为:pool),用于后续Promise.all的使用
  • 当limitedRequest被调用的时候,首先一次性发出10个请求,并放入到pool中
  • 每一个请求完成后的回调函数中继续触发下一个请求,而下一个请求返回Promise,他的回调函数继续绑定同样的回调函数,即循环调用。(看不懂就直接看代码更易懂)
  • 直到全部请求完成,停止。

代码实现

具体代码如下

// 模仿一个fetch的异步函数,返回promise
function mockFetch(param) {
  return new Promise((resovle) => {
    setTimeout(() => {
      resovle(param);
    }, 2000);
  });
}

function limitedRequest(urls, maxNum) {
  const pool = [];
  // 处理maxNum比urls.length 还要大的情况。
  const initSize = Math.min(urls.length, maxNum);
  for (let i = 0; i < initSize; i++) {
      // 一次性放入初始的个数
    pool.push(run(urls.splice(0, 1)));
  }
  // r 代表promise完成的resolve回调函数
  // r 函数无论什么样的结果都返回promise,来确保最终promise.all可以正确执行
  function r() {
    console.log('当前并发度:', pool.length);
    if (urls.length === 0) {
      console.log('并发请求已经全部发起');
      return Promise.resolve();
    }
    return run(urls.splice(0, 1));
  }
  // 调用一次请求
  function run(url) {
    return mockFetch(url).then(r);
  }
  // 全部请求完成的回调
  Promise.all(pool).then(() => {
    console.log('请求已经全部结束');
  });
}
// 函数调用
limitedRequest([1, 2, 3, 4, 5, 6, 7, 8], 3);

# 最终返回结果
$ node .\src\views\doc\detail\index.js
当前并发度: 3
当前并发度: 3
当前并发度: 3
当前并发度: 3
当前并发度: 3
当前并发度: 3
并发请求已经全部发起
当前并发度: 3
并发请求已经全部发起
当前并发度: 3
并发请求已经全部发起
请求已经全部结束

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • element-ui 的el-button组件中添加自定义颜色和图标的实现方法

    element-ui 的el-button组件中添加自定义颜色和图标的实现方法

    这篇文章主要介绍了element-ui 的el-button组件中添加自定义颜色和图标的实现方法,目前的解决方案是:添加一个自定义全局指令,同时在element-ui源码中,加入对应的组件。需要的朋友跟随小编一起看看吧
    2018-10-10
  • 如何利用js实时监听input输入框值的变化

    如何利用js实时监听input输入框值的变化

    在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感,这篇文章主要给大家介绍了关于如何利用js实时监听input输入框值的变化,需要的朋友可以参考下
    2024-02-02
  • JS定义函数的几种常用方法小结

    JS定义函数的几种常用方法小结

    这篇文章主要介绍了JS定义函数的几种常用方法,结合实例形式总结分析了javascript函数表达式、Lambda 表达式、对象方法等常见函数定义操作技巧,需要的朋友可以参考下
    2019-05-05
  • JavaScript滑移效果代码

    JavaScript滑移效果代码

    这里说的滑移其实就是减速效果,能根据设定的坐标平面移动。
    2008-09-09
  • 编写高性能JavaScript(译)

    编写高性能JavaScript(译)

    本文主要关注V8的性能优化,部分内容并不适用于所有JS引擎。最后,转载请注明出处
    2014-08-08
  • 详解ES6 Promise的生命周期和创建

    详解ES6 Promise的生命周期和创建

    这篇文章主要介绍了详解ES6 Promise Promise的生命周期和创建,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • JavaScript实现九宫格移动拼图游戏

    JavaScript实现九宫格移动拼图游戏

    这篇文章主要为大家详细介绍了JavaScript实现九宫格移动拼图游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • js使用highlight.js高亮你的代码

    js使用highlight.js高亮你的代码

    本篇文章主要介绍了js使用highlight.js高亮你的代码 ,非常具有实用价值,需要的朋友可以参考下
    2017-08-08
  • Javascript 对cookie操作详解及实例

    Javascript 对cookie操作详解及实例

    这篇文章主要介绍了Javascript 对cookie操作详解及实例的相关资料,大家在开发网站的时候,都会用到cookie 这里就详细介绍下,需要的朋友可以参考下
    2016-12-12
  • 基于JavaScript实现在新的tab页打开url

    基于JavaScript实现在新的tab页打开url

    这篇文章主要介绍了基于JavaScript实现在新的tab页打开url 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08

最新评论