Résoudre le problème de l'ordre incohérent des requêtes asynchrones dans la boucle for

Résoudre le problème de l'ordre incohérent des requêtes asynchrones dans la boucle for

J'ai rencontré un problème au travail

Boucle For, puis faites une deuxième demande pour l'ID en boucle

Cela conduit à un problème

L'ordre de retour du résultat de la demande est incohérent

Raison : Asynchrone request will L'événement de rappel est placé dans la file d'attente des événements de la microtâche et la microtâche est exécutée après l'exécution de la macrotâche. Pour plus de détails, veuillez vous référer au mécanisme de file d'attente des événements

[Recommandations de cours associées : Vidéo JavaScript. tutoriel]

Solution :

Faire une requête en boucle via la méthode map

Encapsuler la méthode de requête asynchrone et renvoie une promesse

Cela renverra un tableau avec plusieurs promesse

enveloppera la promesse via le promise.all() dans une nouvelle promise instance

// 通过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) => {
        // ......
    })
})

Cet article provient de la colonne tutoriel js, bienvenue pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!