Attendez que les promesses soient résolues en JavaScript

1. Que sont les promesses en JavaScript
2. Étapes de la promesse en JavaScript
3. Implémenter des promesses en utilisant les mots-clés async et await en JavaScript

Dans la version ECMA Script (ES6), la plupart des fonctionnalités modernes du langage de programmation JavaScript ont été introduites. Les fonctionnalités de ce langage, l’une des fonctionnalités les plus importantes et les plus utilisées de JavaScript, appelées promesses, ont également été introduites dans cette version.

Comme nous le savons, le langage JavaScript est un langage à thread unique, ce qui signifie qu’une seule tâche peut être effectuée et dans un ordre spécifique. Dans certains cas, cela peut créer un problème.

Par exemple, si vous avez utilisé une fonction setTimeout(), exécutée au bout de 3 secondes, le compilateur JavaScript n’attendra pas 3 secondes. Comme indiqué ci-dessous, il commencera simplement à exécuter la partie suivante du code.

function abc() {
  console.log('a');
  setTimeout(() => {
    console.log('b');
  }, 3000)
  console.log('c');
}
abc();

Production :

a
c
b

Ici, b doit avoir été imprimé avant c, mais ce n’est pas le cas. Donc, pour surmonter cela, les promesses ont été introduites dans JavaScript, ce qui nous aide à effectuer une tâche asynchrone.

Voyons comment fonctionnent les promesses et attendons que les promesses soient résolues en arrière-plan. De plus, la plupart des concepts que nous apprendrons dans cet article sont pris en charge par la version JavaScript ES6 et supérieure, et cela peut ne pas fonctionner dans les navigateurs plus anciens comme IE.

Que sont les promesses en JavaScript

Chaque fois que nous effectuons une demande comme une demande de base de données ou une demande d’API, cela peut prendre un certain temps pour récupérer les données du serveur. Nous ne pouvons pas dire combien de temps ces opérations peuvent prendre en production où de nombreuses demandes sont effectuées simultanément.

Les promesses en JavaScript nous permettent d’attendre que ces opérations ou tâches terminent leur exécution, et selon que la tâche est accomplie, nous pouvons prendre d’autres mesures.

Nous devons créer un objet de classe Promise en utilisant le mot-clé new pour utiliser les promesses. La promesse prend deux arguments, résoudre et rejeter.

La méthode resolve() renvoie un objet de promesse qui est résolu avec une valeur. S’il y a une erreur lors de l’exécution d’une promesse, la méthode de rejet renverra une erreur.

Les promesses utilisent les mots-clés async et wait. Ces mots clés sont importants et nécessaires lors de la mise en œuvre des promesses.

Nous en apprendrons plus à leur sujet plus loin dans cet article.

Étapes de la promesse en JavaScript

Une analogie avec Promises pourrait être, disons que vous et votre ami vous promettent que vous irez tous les deux regarder un film ensemble dimanche. Et supposez que c’est vendredi et que la Promesse est faite aujourd’hui.

Puisque dimanche n’est pas encore venu, nous pouvons techniquement dire que la Promesse est en suspens. Si vous rencontrez votre ami le dimanche, la Promesse est tenue, et si vous brisez votre Promesse en n’allant pas voir le film, alors la Promesse est rejetée.

Les promesses en JavaScript sont réalisées en 3 étapes, et elles sont les suivantes.

• Pending : lorsqu’une promesse est en cours d’exécution, on dit qu’elle est en attente.
• Fulfilled : lorsqu’une promesse termine son exécution avec succès, elle est résolue et renvoie la valeur de l’opération effectuée. C’est là que la Promesse est censée être en phase d’accomplissement.
• Rejected : Si la Promise échoue lors de son exécution, elle est rejetée et renvoie un message d’erreur. C’est là que la Promesse est dite être au stade rejeté.

Implémenter des promesses en utilisant les mots-clés async et await en JavaScript

Les mots-clés async et await vont de pair lors de la mise en œuvre des promesses.

Le mot-clé async peut être utilisé avec une fonction dont vous pensez qu’elle peut prendre du temps à s’exécuter. Cela les rend qui fonctionnent de manière asynchrone.

Ce mot clé indique au moteur JavaScript qu’une partie du code de cette fonction peut prendre un certain temps à s’exécuter et que vous devez attendre qu’elle termine son exécution.

Nous devons spécifier quelle partie du code de cette fonction pourrait prendre un certain temps à s’exécuter. C’est ici que nous utilisons le mot-clé wait.

Ainsi, partout où vous utilisez un mot-clé await dans cette fonction, le moteur JavaScript attendra que cette partie soit complètement exécutée. Si l’exécution est réussie, la promesse remplie sera retournée ou la promesse sera rejetée.

L’exemple ci-dessous illustre cela.

Ici, nous avons une fonction appelée myPromise. Nous avons créé une Promesse à l’intérieur de cette fonction, résolue ou rejetée.

Le travail de cette fonction est de récupérer les données JSON de l’API. Puisque nous demandons des données à l’API, la Promise peut prendre un certain temps à s’exécuter, nous avons donc utilisé wait pour attendre que la Promise se résolve.

Comme on utilise await avant de retourner une Promise, on doit rendre la fonction myPromise en async.

L’API que nous avons utilisée est une API gratuite du site Web JSONPlaceholder. En utilisant cette API, nous allons récupérer les données des publications.

Nous pouvons utiliser la fonction fetch() pour récupérer les données de cette API. Une fois que cette fonction a récupéré les données, nous devons spécifier ce que nous voulons faire ensuite à l’aide de la fonction then().

Nous renvoyons simplement les données de la fonction fetch() à la fonction then() en tant que paramètre. Le nom du paramètre peut être n’importe quoi, et nous avons donné réponse comme nom de paramètre.

Enfin, nous retournerons la résolution de la Promise en convertissant le résultat au format JSON à l’aide de la fonction response.json().

async function myPromise() {
  return await new Promise((resolve, reject) => {
    fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response => {
          resolve(response.json());
        })
        .catch(error => {
          reject(error);
        });
  })
}

Si nous rencontrons une erreur lors de la récupération des données de l’API, cela sera géré par la fonction catch(). Cette fonction renverra l’erreur à l’aide de la fonction reject().

Une fois la promesse résolue, vous pouvez faire ce que vous voulez ensuite avec les données, qu’elle renvoie à l’aide de la fonction then(). Vous pouvez avoir plusieurs fonctions then(), qui seront exécutées dans une séquence l’une après l’autre.

Et si vous voulez attraper des erreurs, vous pouvez utiliser la fonction catch().

myPromise().then(result => {
  result.forEach(element => {
    var heading = document.createElement('h2');
    heading.innerHTML = element.title;
    document.body.appendChild(heading);
  });
});

Production :

Une fois que la fonction myPromise() a renvoyé une promesse résolue, nous utilisons la fonction then() pour obtenir le titre des articles et l’afficher sur le document HTML.

Ici, nous avons créé une balise d’en-tête h2 et nous ajoutons les titres présents dans les données de résultat que nous avons reçues de l’API posts au body du document HTML.