js循環調用axios異步請求，實現同步

准備：

const axios = require('axios'); // axios請求 
const res = [];
const arr = ["a", "b", "c", "d", "e"];

a(i) {
    return new Promise((resolve, reject) => {
        console.log("異步請求開始：", i);
        axios.post(url, {params})
            .then(({ data }) => {
                if (data.code == 200) {
                    console.log("異步請求響應結束：", i);
                    resolve();
                }
          });
    });
}

b(item) {
    console.log("進入res:", item);
    res.push(item);
}

 

情況1: forEach的內部等待異步請求

arr.forEach(async (item, i) =>{
    console.log("循環",i,item);
    await a(i)
    b(item)
})

　console.log('res:',res);

結果：

 

情況2: forEach外部等待forEach內部的異步請求執行完成

let asyncFun = [];
arr.forEach((item, i) =>{
    console.log("循環",i,item);
    asyncFun.push(a(i))
    b(item)
})
Promise.all(asyncFun).then(() => {
    console.log("res:",res);
});

結果：

 

 

情況3: 既需要map內部同步執行，又需要map外部同步執行

注意：這里用的是map()，Promise需要一個返回值，　　　 
map()方法會得到一個新的數組並返回；（適用於要改變數據值的時候）　　　 
forEach()方法不會返回執行結果，而是undefined；（適用於並不打算改變數據的時候，而只是想用數據做一些事情：比如存入數據庫或打印出來）

Promise.all(
    arr.map((item, i) => {
        return new Promise(async (resolve, reject) => {
            console.log("循環", i, item);
            await a(i);
            b(item);
            resolve();
        });
    })
).then(() => {
    console.log("res:", res);
});

結果：