Un guide de débutant pour JavaScript Async / Await, avec des exemples

Master JavaScript Opérations asynchrones: Async / Await Explication détaillée

Cet article explore en profondeur async / await en JavaScript, vous apprenant à contrôler efficacement les opérations asynchrones et à écrire du code plus clair et plus facile à lire.

Points de base:

• async / await En JavaScript, simplifie le traitement des opérations asynchrones, ce qui donne l'impression que le code est exécuté de manière synchrone, mais est toujours non bloquant.
La fonction
• async renvoie une promesse, et le mot-clé await pause l'exécution de la fonction jusqu'à ce que la promesse soit résolue, améliorant ainsi la lisibilité du code et du contrôle de flux.
La gestion des erreurs des fonctions
• async peut être gérée efficacement à l'aide de la méthode try / catch Block ou Promise. catch()
Utiliser
• pour optimiser les commandes asynchrones en parallèle, permettant à plusieurs Promise.all d'être résolus simultanément plutôt que exécutés séquentiellement. Promise
Les itérateurs asynchrones et
• permettent le traitement correct des fonctions for...of dans la boucle, en garantissant l'ordre d'exécution correct et une meilleure gestion des performances. async
La couche supérieure introduite par ES2022 permet d'utiliser
• à la couche supérieure du module ES, simplifiant l'intégration du code asynchrone sans avoir besoin de wrappers supplémentaires. await await

Résumé du contenu:

comment créer une fonction asynchrone javascript

1. Mots-clés
   • async
   Mots-clés
   • await différentes façons de déclarer les fonctions asynchrones
   JavaScript
/
2. Utiliser underground PROMPRERN await async Passer de la promesse à
   /
   • async await
   Gestion des erreurs dans les fonctions asynchrones
3. La méthode
   utilisant l'appel de fonction
   • catch()
Exécuter des commandes asynchrones en parallèle
asynchrone en boucle synchrone
5. await
Niveau supérieur
6. await
Écriture de code asynchrone en toute confiance

En JavaScript, certaines opérations sont asynchrones. Cela signifie que les résultats ou les valeurs qu'ils produisent ne seront pas immédiatement disponibles.

Considérez le code suivant:

L'interpréteur

<code class="language-javascript">function fetchDataFromApi() {
  // 数据获取逻辑
  console.log(data);
}

fetchDataFromApi();
console.log('数据获取完成');</code>

JavaScript n'attend pas la fonction asynchrone

à terminer avant d'exécuter l'instruction suivante. Par conséquent, il enregistrera les données réelles renvoyées par l'API fetchDataFromApi. 数据获取完成

Dans de nombreux cas, ce n'est pas le comportement attendu. Heureusement, nous pouvons utiliser les mots clés pour faire en sorte que notre programme attende l'opération asynchrone avant de continuer à s'exécuter. async await Cette fonction présente JavaScript dans ES2017 et est prise en charge par tous les navigateurs modernes.

comment créer une fonction asynchrone javascript

Examinons de plus près la logique d'acquisition de données dans la fonction

. La récupération des données dans JavaScript est un exemple principal des opérations asynchrones.

fetchDataFromApi En utilisant l'API Fetch, nous pouvons le faire:

<code class="language-javascript">function fetchDataFromApi() {
  // 数据获取逻辑
  console.log(data);
}

fetchDataFromApi();
console.log('数据获取完成');</code>

Ici, nous obtenons une blague de programmation de Jokeapi. La réponse de l'API est au format JSON, donc une fois la demande terminée (en utilisant la méthode json()), nous extraissons la réponse, puis enregistrons la blague à la console.

Veuillez noter que Jokeapi est une API tierce, nous ne pouvons donc pas garantir la qualité des blagues que nous retournons!

Si nous exécutons ce code dans un navigateur ou dans le nœud (version 17.5 en utilisant le drapeau --experimental-fetch), nous voyons que la console enregistre toujours le contenu dans le mauvais ordre.

changeons-le.

async Mots-clés

La première chose que nous devons faire est de marquer la fonction d'inclusion comme une fonction asynchrone. Nous pouvons le faire en utilisant le mot-clé async, et nous le mettons devant le mot-clé function:

<code class="language-javascript">function fetchDataFromApi() {
  fetch('https://v2.jokeapi.dev/joke/Programming?type=single')
    .then(res => res.json())
    .then(json => console.log(json.joke));
}

fetchDataFromApi();
console.log('数据获取完成');</code>

Les fonctions asynchrones renvoient toujours une promesse (plus à ce sujet plus tard), donc liez simplement then() à l'appel de fonction pour obtenir l'ordre d'exécution correct:

<code class="language-javascript">async function fetchDataFromApi() {
  fetch('https://v2.jokeapi.dev/joke/Programming?type=single')
    .then(res => res.json())
    .then(json => console.log(json.joke));
}</code>

Si nous exécutons le code maintenant, nous verrons quelque chose comme ceci:

<code class="language-javascript">fetchDataFromApi()
  .then(() => {
    console.log('数据获取完成');
  });</code>

mais nous ne voulons pas faire ça! La syntaxe de promesse de JavaScript peut être un peu compliquée, et c'est là que async / await clignote: il nous permet d'écrire du code asynchrone en utilisant une syntaxe qui ressemble plus à du code synchrone et est plus facile à lire.

await Mots-clés

La prochaine chose à faire est de préfacer toutes les opérations asynchrones dans la fonction avec le mot-clé await. Cela obligera l'interprète JavaScript à l'exécution de "pause" et à attendre le résultat. Nous pouvons attribuer les résultats de ces opérations aux variables:

<code>程序员的浪漫：一行代码解决千行代码的bug。
数据获取完成</code>

Nous devons également attendre le résultat de l'appel de la fonction fetchDataFromApi:

<code class="language-javascript">async function fetchDataFromApi() {
  const res = await fetch('https://v2.jokeapi.dev/joke/Programming?type=single');
  const json = await res.json();
  console.log(json.joke);
}</code>

Malheureusement, si nous essayons d'exécuter le code maintenant, nous rencontrerons une erreur:

<code class="language-javascript">await fetchDataFromApi();
console.log('数据获取完成');</code>

C'est parce que nous ne pouvons pas utiliser async en dehors des fonctions await dans des scripts non modules. Nous couvrirons cela plus en détail plus tard, mais maintenant le moyen le plus simple de résoudre ce problème est d'envelopper le code d'appel avec sa propre fonction, que nous marquons également comme async:

<code>Uncaught SyntaxError: await is only valid in async functions, async generators and modules</code>

Si nous exécutons le code maintenant, tout doit être sorti dans le bon ordre:

<code class="language-javascript">async function fetchDataFromApi() {
  const res = await fetch('https://v2.jokeapi.dev/joke/Programming?type=single');
  const json = await res.json();
  console.log(json.joke);
}

async function init() {
  await fetchDataFromApi();
  console.log('数据获取完成');
}

init();</code>

Le fait que nous ayons besoin de ce code de passe-partout supplémentaire est regrettable, mais à mon avis, le code est toujours plus facile à lire que la version basée sur les promesses.

différentes façons de déclarer les fonctions asynchrones

L'exemple précédent utilise deux déclarations de fonction nommées (le mot-clé function suivi du nom de la fonction), mais nous ne sommes pas limités à cela. Nous pouvons également marquer les expressions de fonction, les fonctions de flèche et les fonctions anonymes comme async.

Si vous souhaitez revoir les différences entre les déclarations de fonction et les expressions de fonction, consultez notre guide

(Le contenu suivant est le même. Réécrivez paragraphe par paragraphe en fonction du texte d'origine, maintenez la signification d'origine et ajustez le style de langue pour le rendre plus lisse et plus naturel)

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!