我有一个需求如下：
有一个学生号的数组，根据这个数组，取出相关学生的所有信息。获取学生信息的接口用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']
触发动作为页面上的一个按钮，点击开始执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="Wrapp">
<button>测试</button>
</div>
</body>
</html>
使用传统回调(需要2s，所有请求完成)
let i = 0;
async function getStart(){
let mytimer = setInterval(() => {
i++
console.log(`等待了${i}秒`)
},1000)
let result = []
for(let i=0; i<params.length; i++){
getSudent(params[i]).then((res)=>{
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<params.length; i++){
//因为这里每次请求要等2s，直至执行完成，所以优化这里即可
let res = await getSudent(params[i]);
result.push(res);
}
console.log(result)
clearTimeout(mytimer); //6s
}
let btn = document.querySelector('button');
btn.onclick = getStart;
优化await(需要2s，所有请求完成)
let i = 0;
async function getStart(){
let mytimer = setInterval(() => {
i++
console.log(`等待了${i}秒`)
},1000);
let result = []
for(let i=0; i<params.length; i++){
let res = getSudent(params[i]);
result.push(res);
}
let promiseResult = await Promise.all(result);
console.log(promiseResult); //2s
clearTimeout(mytimer);
}
let btn = document.querySelector('button');
btn.onclick = getStart;
不过针对第一种并行回调确实没什么优化，因为那个本来就是并行，Promise.all仅是把串行请求优化为并行。
还有就是如果后一个接口依赖前一个接口返回值的话，只能是串行
综上，其实Promise.all用武之地并不多