Analyse d'un exemple d'appel asynchrone JavaScript

Cet article aborde principalement la question des appels asynchrones JavaScript étape par étape à travers une petite question. Le processus de réponse est joint à cet article. Les amis intéressés devraient y jeter un œil. Appels asynchrones JavaScript.

Problème

Vous pouvez modifier la fonction aa() ci-dessous, le but est d'utiliser console.log() pour afficher la valeur souhaitée

function aa() {
  setTimeout(function() {
    return "want-value";
  }, 1000);
}

Cependant, il y a des exigences supplémentaires :

La fonction aa() peut être modifiée à volonté, mais il ne peut pas y avoir de console.log()

Exécutez console.log Il ne peut pas y avoir de package setTimeout dans l'instruction ()

Réponse

Peut-être que c'est une question d'entretien, peu importe. L'objectif principal de la question est d'examiner le traitement des résultats de l'exécution d'un appel asynchrone. Puisqu'il s'agit d'un appel asynchrone, il est impossible d'attendre le résultat asynchrone. Le résultat doit être asynchrone. est souvent utilisé pour simuler des opérations asynchrones. Au début, la notification (appel) asynchrone des résultats de traitement du gestionnaire était effectuée via des rappels

Cependant, lorsque les rappels sont utilisés dans des applications asynchrones plus grandes, de nombreuses erreurs sont susceptibles de se produire. Les couches sont imbriquées, donc certaines propositions ont été faites pour les "aplatir" plus tard. Pour cette partie, vous pouvez vous référer à "l'aplatissement" des appels asynchrones de chat. Bien sûr, Promise est une méthode très populaire et a finalement été adoptée par ES6. Utilisez Promise pour l'implémenter comme suit :

function aa(callback) {
  setTimeout(function() {
    if (typeof callback === "function") {
      callback("want-value");
    }
  }, 1000);
}
aa(function(v) {
  console.log(v);
});

En ce qui concerne cet exemple, il est similaire à l'exemple de rappel précédent. Cependant, cela conduira à une méthode plus recommandée - async/await, qui est prise en charge à partir de ES2017 :

function aa() {
  return new Promise(resolve => {
    setTimeout(function() {
      resolve("want-value");
    }, 1000);
  });
}
aa().then(v => console.log(v));

définition aa() et méthode Promise La définition est la même chose, mais lors de l'appel, wait est utilisé pour attendre de manière asynchrone. Après avoir attendu le résultat asynchrone, console.log() est utilisé pour le traiter.

function aa() {
  return new Promise(resolve => {
    setTimeout(function() {
      resolve("want-value");
    }, 1000);
  });
}
async function main() {
  const v = await aa();
  console.log(v);
}
main();

Il convient de noter ici que wait ne peut être utilisé que dans des méthodes asynchrones, donc pour utiliser wait, vous devez définir une méthode principale asynchrone et l'appeler dans la portée globale. Puisque la méthode main est asynchrone (déclarée comme async), s'il y a d'autres instructions après l'appel main(), telles que console.log("hello"), alors cette instruction sera exécutée en premier.

La syntaxe async/await rend l'écriture d'appels asynchrones comme l'écriture de code synchrone. Lors de l'écriture de code, vous pouvez éviter les sauts logiques et faciliter l'écriture. (Référence : De l'enfer au paradis, le rappel du nœud devient async/await)

Bien sûr, définir main() puis appeler main() peut être encapsulé avec IIFE,

Recommandations associées :

(async () => {
  const v = await aa();
  console.log(v);
})();

Méthode PHP pour implémenter des appels multi-thread asynchrones

À propos de la méthode d'appel asynchrone JavaScript

Méthode d'implémentation d'appel asynchrone PHP

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!