ChatGPT m'aide à apprendre [js-async/await]

Cette question implique de poser des questions sur l'utilisation, de remettre en question les doutes et de confirmer la maîtrise~

Demander

js sync wait Parlez-moi, c'est encore un peu déroutant

En JavaScript, nous avons souvent besoin de gérer des tâches asynchrones, telles que obtenir des données du serveur, envoyer des données au serveur, etc. La méthode traditionnelle consiste à utiliser des fonctions de rappel pour gérer des tâches asynchrones, ce qui entraînera un enfer de rappel lorsqu'elles sont imbriquées à plusieurs niveaux, rendant le code difficile à maintenir et à déboguer. Pour résoudre ce problème, JavaScript a introduit Promise et async/await pour gérer les tâches asynchrones.

Parmi eux, async/await est un nouveau sucre syntaxique dans ES8, qui peut gérer les tâches asynchrones de manière plus simple et intuitive. Concernant async/await, vous pouvez le comprendre à partir des points suivants :

1. La fonction asynchrone est une fonction asynchrone qui renvoie un objet Promise Vous pouvez utiliser le mot-clé wait pour attendre le résultat d'une opération asynchrone. processus, la fonction asynchrone libérera le processeur et permettra l'exécution d'autres tâches. Le mot-clé

2. await ne peut être utilisé que dans les fonctions asynchrones. Il peut attendre le résultat d'un objet Promise. Si l'objet Promise devient l'état résolu, la valeur de l'expression wait est le résultat renvoyé par la Promise ; L'objet Promise devient l'état rejeté, une erreur sera générée et interceptée par le bloc try-catch.

3. Il peut y avoir plusieurs expressions d'attente dans la fonction asynchrone, et elles sont exécutées séquentiellement. Les expressions d'attente suivantes doivent attendre que l'expression d'attente précédente soit terminée avant de s'exécuter.

4. L'utilisation de async/await peut écrire du code asynchrone sous une forme similaire au code synchrone. Le code est plus lisible et compréhensible, et plus facile à déboguer et à maintenir.

Ce qui suit est un exemple d'utilisation de async/await pour gérer des tâches asynchrones :

async function getData() {
  try {
    const result1 = await fetch('/api/data1'); // 等待获取数据1
    const result2 = await fetch('/api/data2'); // 等待获取数据2
    return [result1, result2]; // 返回获取的数据
  } catch (error) {
    console.error(error); // 捕获错误并输出到控制台
  }
}

getData().then(data => {
  console.log(data); // 输出获取的数据
});

Dans l'exemple ci-dessus, la fonction getData est déclarée à l'aide du mot-clé async et le mot-clé wait est utilisé dans la fonction pour attendre le résultat de l'opération asynchrone, utilisé ici Deux expressions d'attente sont utilisées pour obtenir respectivement des données différentes. Dans cet exemple, les tableaux de résultats de deux opérations asynchrones sont finalement renvoyés. Si une exception se produit, elle sera interceptée par le bloc try-catch et les informations d'erreur seront générées. Enfin, nous obtenons les données asynchrones en appelant la méthode getData() et envoyons les données sur la console après avoir renvoyé le résultat.

Soumettre des doutes

Je me sens très confus. Await, c'est attendre la fonction asynchrone correspondante, alors pourquoi devrions-nous ajouter async à la fonction qui utilise wait

Très bonne question ! La réponse est : parce que le mot-clé wait ne peut être utilisé que dans les fonctions asynchrones.

Lorsque nous utilisons une fonction asynchrone pour obtenir le résultat d'une tâche asynchrone, nous devons la placer dans une fonction async, puis utiliser await pour attendre le résultat de le fonctionnement asynchrone. Par conséquent, si vous souhaitez utiliser le mot-clé wait, la fonction doit être déclarée comme fonction asynchrone. D'un autre côté, si vous n'utilisez pas de fonction asynchrone, vous ne pouvez pas utiliser wait dans cette fonction. async 函数内部，然后使用 await 等待异步操作的结果。因此，若想使用 await 关键字，必须将该函数声明为 async 函数。反之，如果没有使用 async 函数，就不能在该函数中使用 await。

换句话说，只有当一个函数被声明为 async 函数时，该函数才能够包含 await 关键字，这也是 async/await 语法的基本前提。声明函数为 async 是告诉 JS 引擎该函数执行可能会返回 Promise，从而让 JS 引擎在执行该函数时进行特殊的处理。

需要注意的是，使用 await 来等待异步任务的结果并不一定要在函数内部立即返回 Promise 对象，因为 await

En d'autres termes, ce n'est que lorsqu'une fonction est déclarée comme fonction asynchrone que la fonction peut contenir le mot-clé wait, qui est également la prémisse de base de la syntaxe async/await. Déclarer une fonction comme asynchrone indique au moteur JS que la fonction peut renvoyer une promesse, permettant au moteur JS d'effectuer un traitement spécial lors de l'exécution de la fonction.

Il est à noter que l'utilisation de wait pour attendre le résultat d'une tâche asynchrone ne renvoie pas nécessairement l'objet Promise immédiatement à l'intérieur de la fonction, car le processus d'exécution du mot-clé await est similaire à l'exécution processus de l’appel de la chaîne Promise, un objet Promise sera également automatiquement créé et renvoyé.

En général, async et wait sont le sucre syntaxique qui constitue le style de programmation asynchrone Promise. Ils rendent le code asynchrone plus intuitif et lisible, nous permettant d'utiliser du code de style synchrone pour écrire et traiter du code d'opération asynchrone.

Confirmez votre compréhension

Oh, en fait la marque asynchrone ne modifie pas la fonction, n'est-ce pas ? Je pensais au départ que cette marque transformerait une fonction en fonction asynchrone pour l'exécution

Vous avez raison ! En fait, le mot-clé async ne transforme pas directement une fonction en exécution de fonction asynchrone. Il indique simplement au moteur JavaScript qu'il peut y avoir des opérations asynchrones à l'intérieur de la fonction et que l'exécution de la fonction peut devoir être suspendue lors de l'utilisation du mot-clé wait.

En d'autres termes, le mot-clé async ne change pas la nature de la fonction, mais fournit un moyen plus pratique de gérer les opérations asynchrones. Lorsque la fonction asynchrone est appelée, elle renverra un objet Promise et le code à l'intérieur de la fonction asynchrone sera automatiquement encapsulé dans la méthode de résolution de l'objet Promise au moment de l'exécution. Lorsque vous utilisez le mot clé wait dans une fonction asynchrone pour attendre la fin d'une opération asynchrone, la fonction suspend l'exécution jusqu'à ce que l'opération asynchrone renvoie un résultat ou génère une erreur.

De plus, il convient de noter que lors de l'utilisation de l'instruction return pour renvoyer une valeur dans une fonction asynchrone, la valeur renvoyée sera regroupée dans un objet Promise par Promise.resolve(), et la valeur de l'objet Promise est la valeur renvoyée par l'instruction return. Si une exception est levée dans la fonction asynchrone, elle sera enveloppée dans un objet Promise par Promise.reject() et renvoyée à l'appelant. 🎜🎜Ainsi, nous pouvons utiliser async/await avec du code de style Promise pour créer un modèle de programmation asynchrone plus simple et plus intuitif. 🎜

Autre confirmation des points de connaissance

Donc, async est une représentation du traitement des opérations asynchrones, pas une syntaxe pour créer des opérations asynchrones

Oui, votre compréhension est très précise. async est une représentation pour gérer les opérations asynchrones, pas une syntaxe pour créer des opérations asynchrones.

En fait, JavaScript dispose déjà de certains mécanismes pour gérer les opérations asynchrones, tels que setTimeout, XMLHttpRequest, fetch, etc. Ces mécanismes sont basés sur le modèle de programmation asynchrone de la boucle d'événements et sont largement utilisés dans diverses applications JavaScript.

Cependant, ces mécanismes présentent certains problèmes, comme un enfer de rappel et une mauvaise lisibilité du code. Afin de résoudre ces problèmes, Promise et async/await ont été introduits en tant que nouvelle méthode de programmation asynchrone et sont rapidement devenus largement utilisés.

Dans ce processus, la fonction asynchrone joue un rôle important dans le traitement des opérations asynchrones. Il fournit une forme de code plus intuitive et facile à comprendre et permet aux développeurs JavaScript de mieux maîtriser la technologie de programmation asynchrone. Par conséquent, nous pouvons considérer les fonctions asynchrones comme un complément au modèle de code de style Promise pour obtenir une programmation asynchrone plus flexible et plus efficace.

---

Une bonne enquête~                                                                                     

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!