Comment créer une fonction asynchrone en TypeScript ?

La programmation asynchrone nous permet d'effectuer plusieurs tâches en parallèle. Nous pouvons rendre les fonctions asynchrones en utilisant des mots-clés async/await.

Avant de commencer, comprenons d’abord les exigences de la programmation et des fonctions asynchrones. Lorsque nous obtenons des données de l'API, la réponse prend un certain temps. Nous devons maintenant utiliser les résultats obtenus par l'API dans notre application.

Les langages de programmation monothread comme TypeScript et JavaScript n'arrêtent jamais l'exécution du code. Ainsi, au lieu d'attendre une réponse de l'API, elle commence à effectuer une opération sur la valeur nulle.

Lorsque nous créons une fonction asynchrone, elle suspend l'exécution d'un bloc de code spécifique jusqu'à ce que nous obtenions une réponse de l'API. Par conséquent, nous pouvons manipuler les données au lieu de manipuler des valeurs nulles.

Grammaire

Les utilisateurs peuvent rendre les fonctions asynchrones dans TypeScript en suivant la syntaxe suivante.

async function func1() {
   await resolvePromise();
   // this code will not be executed until the promise is resolved
}

func1();
// this code will execute even if the promise is not resolved.

Dans la syntaxe ci-dessus, nous avons utilisé le mot-clé async avant la fonction pour la rendre asynchrone. De plus, nous utilisons également le mot-clé wait pour suspendre l'exécution de la fonction jusqu'à ce que nous obtenions la réponse de la promesse.

Ainsi, le mot-clé wait suspend simplement l'exécution de la fonction asynchrone et d'autres codes peuvent continuer à s'exécuter. Une fois l’engagement résolu, l’exécution recommence.

Maintenant, comprenons le concept de fonctions asynchrones à travers différents exemples.

Exemple

Dans cet exemple, nous avons créé une fonction de test asynchrone à l'aide du mot-clé async. Dans la fonction test(), nous utilisons le mot-clé wait pour suspendre la fonction pendant un certain temps.

Dans la sortie, l'utilisateur peut observer qu'il imprime "Après l'exécution de la fonction" avant d'imprimer la valeur de la variable de données dans la fonction. Ainsi, nous pouvons comprendre que lorsque le mot-clé wait met en pause l'exécution d'une fonction, il commence à exécuter un autre code, améliorant ainsi les performances de l'application.

async function test(): Promise {
   let data: string = await "default string";
   console.log("The value of data is " + data);
}

console.log("Before function execution");
test();
console.log("After function execution");

Une fois compilé, il générera le code JavaScript suivant -

"use strict";
async function test() {
   let data = await "default string";
   console.log("The value of data is " + data);
}
console.log("Before function execution");
test();
console.log("After function execution");

Sortie

Le code ci-dessus produira la sortie suivante -

Before function execution
After function execution
The value of data is default string

Exemple 2

Dans cet exemple, la fonction samplePromise() contient des promesses. Nous utilisons le constructeur Promise pour créer et résoudre des promesses. De plus, nous avons renvoyé la promesse de la fonction samplePromise().

executeAsync() utilise le mot-clé wait pour appeler la fonction samplePromise(). Les utilisateurs peuvent observer dans le résultat que le mot-clé wait suspend l'exécution de la fonctionexecuteAsync() jusqu'à ce que la promesse soit remplie.

async function samplePromise() {
   const new_promise = new Promise(function (resolve, reject) {
      resolve("Successfully resolved");
   });
   return new_promise;
}

async function executeAsync() {
   try {
      let response = await samplePromise();
      console.log(response);
   } catch (err) {
      console.log("Error is " + err);
   }
}
console.log("Before calling a function");
executeAsync();
console.log("After calling a function");

Une fois compilé, il générera le même code JavaScript -

async function samplePromise() {
   const new_promise = new Promise(function (resolve, reject) {
      resolve("Successfully resolved");
   });
   return new_promise;
}

async function executeAsync() {
   try {
      let response = await samplePromise();
      console.log(response);
   } catch (err) {
      console.log("Error is " + err);
   }
}
console.log("Before calling a function");
executeAsync();
console.log("After calling a function");

Sortie

Il produira la sortie suivante –

Before calling a function
After calling a function
Successfully resolved

Dans ce tutoriel, les utilisateurs ont appris à créer des fonctions asynchrones. De plus, nous avons appris à utiliser le mot-clé async/await et à nous engager à en extraire des données. Les fonctions asynchrones améliorent les performances des applications monothread.

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!