我有一個需求如下：
有一個學生號的數組，根據這個數組，取出相關學生的所有信息。獲取學生信息的接口用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用武之地並不多