Pourquoi "attendre" casser ou tuer une boucle for-moderne en Javascript?

Question

J'ai la fonction suivante. Il obtient un tableau d'attributs et les itère en boucle pour placer chaque attribut dans une base de données. Mais la boucle sera tué automatiquement avec la déclaration await:

async function importAttributeRecords(attributeValues, languageId, attributes, dataStorage, tx) { 
    for(let attr of attributes) { 
    console.log("Persist", attr) 
    try { 
     await importAttributeRecord(attributeValues, languageId, attr, dataStorage, tx) 
    } 
    catch(err) { 
     console.log(err); 
    } 
    console.log("After persisting"); 
    } 
} 

Le premier appel à await sera exécuté, mais la deuxième déclaration console.log après il ne sera jamais apparaître. En outre, la boucle sera fermée immédiatement.

Comment puis-je exécuter une fonction comme mon importAttributeRecord() dans une boucle de façon synchrone, même si elle renvoie une promesse? Et pourquoi l'utilisation de "await" est-elle dangereuse pour les boucles?

Answer 1

Ceci pourrait être décrit comme une "erreur de catégorie". Une boucle for est fondamentalement une idée de programmation synchrone, faisant chaque chose dans (typiquement) un tableau ou une autre entité indexée, l'un après l'autre, attendant à chaque fois.

La programmation asynchrone, implémentée par async, est une approche différente. La façon la plus parfaite de l'utiliser est simplement d'exprimer une relation entre la situation avant et après la situation, et de laisser le langage prendre soin de la synchronisation et éventuellement de l'exécution simultanée ou parallèle.

Pour cette situation, voici comment vous le faire:

async function importAttributeRecords(attributeValues, languageId, attributes, dataStorage, tx) { 
    return Promise.all(attributes.map(attr => { 
    console.log("Initiate persist", attr); 
    return importAttributeRecord(attributesValues, languageId, attr, dataStorage, tx).then(result => { 
     console.log("After persisting", attr, result); 
    }).catch(err => { 
     console.log("Error: ", attr, err); 
    })); 
    }); 
} 

Vous remarquerez que importAttributeRecords retourne maintenant un tableau de promesses, il est donc légitime async. Vous verrez également que ce code est légèrement plus court!