鍍金池/ 問(wèn)答/HTML/ 異步操作的問(wèn)題

異步操作的問(wèn)題

在一個(gè)函數(shù)中 for循環(huán) 發(fā)送了多個(gè)請(qǐng)求， 怎么等到請(qǐng)求全部返還時(shí)執(zhí)行下一個(gè)函數(shù)，因?yàn)橄乱粋€(gè)函數(shù)要使用返還值。

回答
編輯回答
冷溫柔

1.如樓上所述，創(chuàng)建一個(gè)保存結(jié)果狀態(tài)的數(shù)組,且假設(shè)你要循環(huán)的ajax數(shù)量為ajax_count
var result = [];
2.聲明一個(gè)ajax的回調(diào)函數(shù)，該函數(shù)會(huì)根據(jù)result數(shù)組的狀態(tài)來(lái)執(zhí)行另一個(gè)函數(shù)（就是在ajax全部執(zhí)行完成后需要執(zhí)行的內(nèi)容）
function on_all_ajax_finished()
{

console.log("所有ajax執(zhí)行完畢！");

}

function ajax_callback()
{

if（result.length == ajax_count -1）
{
    on_all_ajax_finished();
}
else
{
    result.push(1);//push一個(gè)任意的內(nèi)容到數(shù)組來(lái)增加數(shù)組的長(zhǎng)度，不知道js有沒(méi)有線程安全問(wèn)題
}

}

2017年2月13日 14:10
編輯回答
哎呦喂

for中將每個(gè)請(qǐng)求放到一個(gè)promise中，然后把這個(gè)promise push到一個(gè)數(shù)組中，最后使用 let result = await Promise.all(promise數(shù)組);, result包含了所有的返回值。

2017年6月26日 10:20
編輯回答
怣痛

如果是vue項(xiàng)目的話，有些異步問(wèn)題是可以用watch監(jiān)聽(tīng)來(lái)解決的

2018年7月28日 23:22
編輯回答
離殤

最簡(jiǎn)單的方式就是1樓說(shuō)的那樣，用async+await 結(jié)合Promise.all來(lái)實(shí)現(xiàn)，我提供另外一個(gè)比較原始的方法給你參考下。
另外用一個(gè)新數(shù)組緩存請(qǐng)求結(jié)果，異步拿到結(jié)果后保存到數(shù)組，當(dāng)緩存數(shù)組長(zhǎng)度與請(qǐng)求長(zhǎng)度一致時(shí)，就說(shuō)明請(qǐng)求已經(jīng)全部返回可以執(zhí)行下一步了

const result = [];
const request = [1, 2, 3, 4, 5];
request.forEach(id => {
  axios.get(`/user?ID=${id}`).then(res => {
    result.push(res);
    if (result.length === request.length){
      //請(qǐng)求已全部返還，執(zhí)行下一個(gè)函數(shù)
    } 
  })
})
2017年9月6日 02:49