Explorez la puissance de l'asynchrone et attendez en JavaScript

Dans mon tutoriel précédent, nous avons couvert les bases des promesses en JavaScript. J'ai dit à la fin de l'article que les promesses nous permettent d'exécuter notre code de manière asynchrone.

Dans ce tutoriel, nous découvrirons les mots-clés async 和 await en JavaScript qui nous permettent d'utiliser efficacement Promises et d'écrire du code asynchrone plus propre.

définir asyncfonction

Commençons par les fonctions asynchrones. Considérez la fonction de message d'accueil suivante :

function greet() {
  return "Hello, World!";
}

// Outputs: Hello, World!
console.log(greet());

Il s’agit simplement d’une fonction JavaScript classique que nous avons déjà vue. Tout ce qu'il fait, c'est renvoyer une chaîne qui dit "Hello, World!". Cependant, nous pouvons transformer cela en fonction asynchrone en ajoutant simplement async devant, comme ceci :

async function greet() {
  return "Hello, World!";
}

// Outputs: Promise { <state>: "fulfilled", <value>: "Hello, World!" }
console.log(greet());

Cette fois, la fonction renvoie un objet Promise avec sa propriété d'état définie sur Completed et sa valeur définie sur Hello, World ! En d'autres termes, la promesse a été résolue avec succès.

Nous renvoyons toujours la chaîne "Hello, World!" dans la définition de la fonction. Cependant, l'utilisation du mot-clé async 关键字意味着返回值将包装在已解析的 Promise 对象中。已解决的 Promise 的值将与我们从 async signifie que la valeur de retour sera enveloppée dans un objet

analysé. La valeur de la promesse résolue sera la même que la valeur que nous avons renvoyée de la fonction

. async

Vous pouvez également renvoyer votre propre promesse à partir de la fonction

comme ceci : async

async function greet() {
  return Promise.resolve("Hello, World!");
}

// Outputs: Hello, World!
greet().then((value) => console.log(value));

Fondamentalement, le mot-clé

nous aide à définir une fonction qui renvoie toujours une promesse. Vous pouvez renvoyer explicitement une promesse vous-même ou demander à la fonction d'envelopper toute valeur de retour qui n'est pas une promesse dans une promesse. await

Mots clésasync 函数都可以包含零个或多个 await 表达式。重要的是要记住 await 关键字仅在 async 函数内有效。 await 关键字用于等待 Promise

Toute fonction

peut contenir zéro ou plusieurs expressions await. Il est important de rappeler que le mot-clé

n'est valable qu'à l'intérieur d'une fonction

. Le mot-clé Promise，这种情况下直接使用，原生等待。在这种情况下，不会有对 then() 的隐式调用。表达式可以是 thenable 对象，在这种情况下，将通过调用 then() 方法构造一个新的 Promise 。该表达式也可以是不可thenable 的值。在这种情况下，将构建一个已经实现的 Promise est utilisé pour attendre que

soit résolu ou rejeté, puis obtenir la valeur complétée.

asyncNous utilisons le mot clé

, la syntaxe est la suivante :

await expression

async 函数中使用 awaitL'expression peut être native

Dans ce cas, elle est utilisée directement et l'attente native est utilisée. Dans ce cas, il n'y aura pas d'appel implicite à then(). L'expression peut être un objet exploitable, auquel cas un nouveau

sera construit en appelant la méthode then(). L'expression peut également être une valeur non exploitable. Dans ce cas, un await 关键字与 async déjà implémenté sera construit pour que nous puissions l'utiliser.

Supposons qu'une promesse ait été tenue.

L'exécution de la fonction sera toujours en pause jusqu'au prochain tick. Il est important de s'en souvenir.

Voici un exemple d'utilisation du mot-clé

dans une fonction

 :

async function greet() {
  let greeting = await "Hello, World!";
  return greeting;
}

// Outputs: [Function: Promise]
console.log(greet().constructor);

// Outputs: Hello, World!
greet().then((msg) => console.log(msg));

n_greet() 是一个返回字符串作为输出的普通函数。我们的第二个函数是 async 函数，它在 awaitVoici un autre exemple d'utilisation du mot-clé

avec la fonction

lors de l'utilisation explicite de Promise :

async function greet() {
  let greeting = new Promise((resolve) => {
    setTimeout(() => {
      resolve("Hello, World!");
    }, 2000);
  });
  
  return greeting;
}

// Outputs: [Function: Promise]
console.log(greet().constructor);

// Outputs: Hello, World!
greet().then((msg) => console.log(msg));

Cette fois, nous utilisons explicitement une promesse qui se résout en 2 secondes. Par conséquent, le message d'accueil « Hello, World » sera imprimé après deux secondes. n_greet()

Comprendre l'ordre d'exécution des déclarations

a_greet()Nous allons maintenant écrire deux fonctions de message d'accueil différentes et voir l'ordre dans lequel elles affichent leurs résultats.

function n_greet(person) {
  return `Hello, ${person}!`;
}

async function a_greet(person) {
  let greeting = await `Hello, ${person}!`;
  return greeting;
}

Notre première fonction async 函数，其中包含多个语句。这些语句之一将具有 await 关键字。您将看到，在 async 函数中使用 await 关键字会暂停执行 await est une fonction normale qui renvoie une chaîne en sortie. Notre deuxième fonction est la fonction

, qui utilise une expression après le mot-clé

. La valeur de retour dans ce cas est une promesse tenue. async 函数包含一个显式定义的 Promise，前面带有 await 关键字。这意味着 await Voici l'extrait de code qui appelle toutes ces fonctions et enregistre le résultat :

a_greet("Andrew").then((msg) => console.log(msg));
console.log(n_greet("Adam"));

/* Output in order:
Hello, Adam!
Hello, Andrew! */

Bonjour Adam, l'appel de la fonction

est terminé. Cependant, il a d'abord été accueilli en sortie. En effet, l'appel de fonction renvoie directement une chaîne. async

🎜 L'appel de fonction qui salue Andrew au début conduit à la construction d'une promesse qui a été tenue. Cependant, l'exécution reste suspendue jusqu'au prochain cycle d'horloge. C'est pourquoi le message d'accueil de sortie apparaît après le message d'accueil adressé à Adam. 🎜 🎜Maintenant, nous allons définir une fonction 🎜 légèrement plus complexe qui contient plusieurs instructions. L'une de ces déclarations aura le mot-clé 🎜. Vous verrez que l'utilisation du mot-clé 🎜 dans une fonction 🎜 suspend l'exécution des autres instructions suivant l'instruction 🎜. 🎜

function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms))    
}

async function aa_greet(person) {
  console.log("Before Await..."); 
  await timeout(2000);
  let greeting = `Hello, ${person}!`;
  console.log("After Await...");
  
  return greeting;
}

🎜Notre fonction 🎜 contient une Promesse explicitement définie, précédée du mot-clé 🎜. Cela signifie que le mot-clé 🎜 attendra que la promesse soit remplie, puis renverra la valeur remplie. La promesse mettra 2 secondes à se matérialiser, donc après environ 2 secondes nous devrions voir "🎜After Await...🎜" dans le journal de la console. 🎜 🎜 Ceci est un extrait de code qui enregistrera quelques instructions de notre fonction 🎜 : 🎜

console.log("Before Greeting Function...");
aa_greet("Monty").then((msg) => console.log(msg));
console.log("After Greeting Function...");

/* Output in Order
23:42:15.327 Before Greeting Function...
23:42:15.331 Before Await...
23:42:15.331 After Greeting Function...
23:42:17.333 After Await...
23:42:17.333 Hello, Monty! */

首先记录字符串“Before Greeting Function...”，因为这是我们进行的第一次调用。之后，我们调用 aa_greet() 函数。这会导致输出字符串“Before Await...”。然后，浏览器遇到 await 关键字。所以它等待承诺解决。与此同时，aa_greet()函数之外的代码继续执行。这就是为什么我们在下一个日志条目中得到“After Greeting Function...”字符串作为输出。

一旦承诺得到解决，浏览器就会继续执行，我们会得到“After Await...”作为输出。最后，我们解析的问候语作为承诺返回，因为我们使用 async 函数。我们对这个已解决的 Promise 调用 then() 方法并记录“Hello, Monty!”到控制台。

通过 Fetch API 使用 async 和 await

await 关键字的一个常见用例是从远程 API 获取数据。这允许比嵌套回调或承诺链更干净的代码。

async function getData() {
    // use the fetch API to fetch data from an API endpoint
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    
    // check if the response is okay (HTTP status code 200-299)
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    
    // parse the response as JSON
    const data = await response.json();
    
    return data;
}

在此函数中，首先我们等待对 API 查询的初始响应。如果响应正常，我们就会等待 JSON 格式的完整响应数据。我们返回 JSON 数据，但请记住，由于这是一个异步函数，因此我们实际上返回一个最终解析为该数据的 Promise。因此，如果您想访问结果数据，您必须再次使用类似await关键字的东西！

const data = await getData();

最终想法

在上一篇教程中了解了 Promise 对象后，我们在本教程中讨论了 async 函数和 await 关键字。您现在应该能够编写自己的 async 函数，使用 await 关键字来使用更清晰、更易读的代码实现基于 Promise 的行为。

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!