Maison > interface Web > js tutoriel > le corps du texte

Comment garantir que les fonctions asynchrones s'exécutent en séquence ?

Linda Hamilton
Libérer: 2024-10-28 01:59:02
original
849 Les gens l'ont consulté

How to Ensure Asynchronous Functions Execute in Sequence?

Comment séquencer des fonctions asynchrones

La tâche à accomplir est de s'assurer qu'une fonction termine son exécution avant qu'une autre fonction ne commence son exécution. Dans le code fourni, firstFunction() est appelé dans secondFunction(), mais l'appelant a l'intention que secondFunction() attende que firstFunction() se termine avant de continuer.

Approche de la fonction de rappel

Une technique courante pour séquencer du code asynchrone consiste à utiliser des fonctions de rappel. Voici une version révisée du code utilisant des rappels :

<code class="javascript">function firstFunction(callback) {
  // Asynchronous operations go here.
  // When operations complete, invoke the callback function.
  callback();
}

function secondFunction() {
  firstFunction(() => {
    // Code that should execute after firstFunction() completes.
  });
}</code>
Copier après la connexion

Dans cet exemple, firstFunction() prend une fonction de rappel comme argument. Lorsque les opérations asynchrones dans firstFunction() sont terminées, la fonction de rappel est appelée, signalant ainsi à secondFunction() qu'elle est terminée.

Syntaxe de la fonction flèche

Une approche plus récente utilise des fonctions fléchées :

<code class="javascript">firstFunction(() => console.log('Done!'));</code>
Copier après la connexion

Cette syntaxe simplifie la fonction de rappel en utilisant une fonction fléchée (représentée par =>) qui exécute l'action souhaitée lorsque firstFunction() se termine.

Async/Await

Une approche plus moderne et complète consiste à utiliser async/await. Cette méthode implique de définir les fonctions comme asynchrones et d'utiliser le mot-clé wait pour suspendre l'exécution jusqu'à ce qu'une promesse soit résolue :

<code class="javascript">const firstFunction = async () => {
  // Asynchronous operations go here.
  return Promise.resolve(); // Return a promise that resolves when operations complete.
};

const secondFunction = async () => {
  await firstFunction();
  // Code that should execute after firstFunction() completes.
};</code>
Copier après la connexion

Dans firstFunction(), le retour Promise.resolve() indique qu'elle sera résolue lorsque les opérations asynchrones sont terminées. Le mot-clé wait dans secondFunction() garantit qu'il attendra la résolution de la promesse de firstFunction() avant de continuer.

L'un des avantages d'async/await est une meilleure lisibilité du code et une gestion plus propre des erreurs par rapport aux rappels.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!