for ループ内の非同期リクエストの順序が一貫していない問題を解決する

for ループ内の一貫性のない非同期リクエストの順序の問題を解決する

仕事中に問題が発生しました

for ループを実行し、ループされた ID を使用して 2 番目のリクエストを作成します。

これにより問題が発生します

リクエスト結果の戻り順序が矛盾しています

理由: 非同期リクエストwill コールバック イベントはマイクロタスクのイベント キューに入れられ、マクロタスクの実行後にマイクロタスクが実行されます。詳細については、イベント キューのメカニズムを参照してください。

[関連コースの推奨事項: JavaScript ビデオ チュートリアル]

解決策:

map メソッドを通じてループ リクエストを作成します

非同期リクエスト メソッドをカプセル化し、 return a promise

これは、複数の promise

promise を promise でラップした配列を返します。 all() メソッド 新しい promise インスタンス

// 通过Promise把所有的异步请求放进事件队列中
getInfo(item ,index) {
    const ms = 1000 * Math.ceil(Math.random() * 3)
    return new Promise((resolve,reject) => {
        setTimeout(() => {
           axios.get(id).then((result) => {
               resolve(result)
           })
        }, ms)
    })
}

// 返回多个promise
let promise = arr.map((item,index) = > {
    arr.forEach((item, index) => {
        return getInfo(item, index)
    })
})
// 对返回的promise数组进行操作
Peomise.all(promise).then((allData) => {
    arr.forEach((item, index) => {
        // ......
    })
})

この記事は js チュートリアル 列からのものです。ぜひ学習してください。

以上がfor ループ内の非同期リクエストの順序が一貫していない問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。