您好,登录后才能下订单哦!
这篇文章主要介绍“promise.all()怎么使用”,在日常操作中,相信很多人在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) } }) }) }
// 当以下数组中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
并发请求已经全部发起
请求已经全部结束
到此,关于“promise.all()怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。