我有一个需求如下:
有一个学生号的数组,根据这个数组,取出相关学生的所有信息。获取学生信息的接口用setTime模拟,假设每次请求需要耗时2s,代码如下// 获取学生信息接口function getSudent(sid) { return new Promise((resolve, reject) => { setTimeout(() => { const dataBase = { '20190101': {sid:20190101,name:'小明', age:20}, '20190102': {sid:20190102,name:'小红', age:18}, '20190103': {sid:20190102,name:'小青', age:17} } resolve(dataBase[sid]) }, 2000); })}
已知要得到信息的学生的数组如下:
const params = ['20190101', '20190102', '20190103']
触发动作为页面上的一个按钮,点击开始执行
Document
使用传统回调(需要2s,所有请求完成)
let i = 0;async function getStart(){ let mytimer = setInterval(() => { i++ console.log(`等待了${i}秒`) },1000) let result = [] for(let i=0; i{ result.push(res); if(i === params.length-1){ console.log(result); //2s clearTimeout(mytimer); } }) }}let btn = document.querySelector('button');btn.onclick = getStart;
使用await(需要6s,所有请求完成)
let i = 0;async function getStart(){ let mytimer = setInterval(() => { i++ console.log(`等待了${i}秒`) },1000); let result = []; for(let i=0; i
优化await(需要2s,所有请求完成)
let i = 0;async function getStart(){ let mytimer = setInterval(() => { i++ console.log(`等待了${i}秒`) },1000); let result = [] for(let i=0; i
不过针对第一种并行回调确实没什么优化,因为那个本来就是并行,Promise.all仅是把串行请求优化为并行。
还有就是如果后一个接口依赖前一个接口返回值的话,只能是串行 综上,其实Promise.all用武之地并不多