|
| 1 | +--- |
| 2 | +chapter: 18 |
| 3 | +pageNumber: 89 |
| 4 | +description: Une Promesse (Promise en anglais) est un objet qui représente l'achèvement (ou l'échec) d'une tâche asychrone et sa valeur de retour. Les Promesses nous donnent une meilleur struture de gestion des opérations asynchrones telles que les appels réseaux, la lecture des fichiers ou l'interation avec les bases de données. |
| 5 | +--- |
| 6 | + |
| 7 | +# Chapter 18 |
| 8 | +# Les Promesses, async/await |
| 9 | + |
| 10 | +Alors, mettez-vous dans la peau d'un écrivain et vous êtes actuellement en train de planifier la sortie de votre prochaine oeuvre. Les lecteurs qui s'intéressent à ce livre l'ajoutent à leur liste de souhait et sont notifiés lorsque le livre paraît ou même quand la date de sortie est repoussée. Le jour de la sortie, tout le monde peut l'acheter et tout le monde est content. Ceci est une analogie avec le fonctionnement des promesses (autrement appelées **Promises**) en JavaScript. |
| 11 | + |
| 12 | +1. Le "_producteur_" est un bloc d'instructions qui prend du temps à s'exécuter et accomplit quelque chose. Ici, c'est l'écrivain. |
| 13 | +2. Le "_consommateur_" est quelque chose qui consomme ce que produit le producteur une fois que c'est prêt. Dans notre parabole, il s'agit du "lecteur". |
| 14 | +3. Ce qui lie le "_producteur_" et le "_consommateur_" peut être appellé une _promesse_ parce qu'elle permet de fournir le résultat du "_producteur_" au "_consommateur_". |
| 15 | + |
| 16 | +# Promise |
| 17 | + |
| 18 | +L'analogie qui nous avons faite est aussi vraie pour les objets de type `promise` en JavaScript. La syntaxe de création à partir du constructeur est comme suit: |
| 19 | + |
| 20 | +```javascript |
| 21 | +let promise = new Promise(function(resolve, reject) { |
| 22 | + // Le producteur ici |
| 23 | +}); |
| 24 | +``` |
| 25 | + |
| 26 | +Ici, une fonction est passée au constructeur `new Promise`, aussi connu sous le nom d'_exécutant_ et s'exécute automatiquement dès l'appel du constructeur. Il contient le code de production qui retourne le résultat. `resolve` et `reject` sont les arguments fournis par JavaScript lui-même et sont appelés dans les conditions suivantes: |
| 27 | + |
| 28 | +* `resolve(value):` Une fonction de callback qui renvoie `value` comme résultat. |
| 29 | +* `reject(error)`: Une fonction de callback qui renvoie `error` en cas d'erreur. |
| 30 | + |
| 31 | + |
| 32 | + |
| 33 | +Les propriétés internes de la promesse retournée par l'appel du constructeur `new Promise` sont : |
| 34 | + |
| 35 | +* `state` - initialement `pending` (en cours), ensuite change à soit `fulfill` (accomplie) lorsque `resolve` est appelée, soit `rejected` (rejetée) lorsque c'est `reject` qui est appelée. |
| 36 | +* `result` - initialement `undefined`, ensuite change à `value` en cas d'appel à `resolve` ou `error` lorsque c'est `reject` qui est appelée. |
| 37 | + |
| 38 | +{% hint style="warning" %} |
| 39 | +Nous ne pouvons pas accéder aux propriétés : `state` et `result`. Les méthodes spécifiques au type Promise sont nécessaires pour gérer les promesses. |
| 40 | +{% endhint %} |
| 41 | + |
| 42 | +Exemple d'une promesse : |
| 43 | + |
| 44 | +```javascript |
| 45 | +let promiseOne = new Promise(function(resolve, reject) { |
| 46 | + // La fonction est exécutée automatiquement après l'appel du constructeur |
| 47 | + |
| 48 | + // Là nous lui disons : attends une seconde et renvoie un signal "done" comme résultat |
| 49 | + setTimeout(() => resolve("done"), 1000); |
| 50 | +}) |
| 51 | + |
| 52 | +let promiseTwo = new Promise(function(resolve, reject) { |
| 53 | + // La fonction est exécutée automatiquement lorsque la promesse est initiée (appel du constructeur) |
| 54 | + |
| 55 | + // Là nous lui disons: attends une seconde et renvoie une erreur: "Whoops!" |
| 56 | + setTimeout(() => reject(new Error("Whoops!")), 1000); |
| 57 | +}) |
| 58 | +``` |
| 59 | + |
| 60 | +Ici, la promesse `promiseOne` est un exemple de promesse "_fulfilled_", (i.e _accomplie_) parce qu'elle est résolue (appel de _resolve()_) tandis que la promesse `promiseTwo` est une promesse "_rejected_" (i.e _rejetée_) parce que c'est la fonction _reject_ qui fut appelée par l'exécuteur. |
| 61 | + |
| 62 | +Une promesse qui n'est ni _rejected_, ni _resolved_ est appelée _settled_ en opposition à l'état _pending_ initial. On peut consommer la promesse en utilisant les méthodes `.then` et `.catch`. Nous pouvons également ajouter `.finally` pour effectuer des actions après l'appel de l'une des méthodes précédentes. |
| 63 | + |
| 64 | +```javascript |
| 65 | +let promiseOne = new Promise(function(resolve, reject) { |
| 66 | + setTimeout(() => resolve("done!"), 1000); |
| 67 | +}); |
| 68 | + |
| 69 | +// resolve exécute la première fonction qu'on fourni à .then |
| 70 | +promiseOne.then( |
| 71 | + result => alert(result), // affiche "done!" après 1 seconde |
| 72 | + error => alert(error) // Ne s'exécute pas |
| 73 | +); |
| 74 | + |
| 75 | +let promiseTwo = new Promise(function(resolve, reject) { |
| 76 | + setTimeout(() => reject(new Error("Whoops!")), 1000); |
| 77 | +}); |
| 78 | + |
| 79 | +// reject exécute la deuxième fonction qu'on fournit à .then |
| 80 | +promiseTwo.then( |
| 81 | + result => console.log(result), // Ne s'exécute pas |
| 82 | + error => console.log(error) // Affiche l'erreur "Error: Whoops!" après une seconde |
| 83 | +); |
| 84 | + |
| 85 | +let promiseThree = new Promise((resolve, reject) => { |
| 86 | + setTimeout(() => reject(new Error("Whoops!")), 1000); |
| 87 | +}); |
| 88 | + |
| 89 | +// .catch(f) est pareil que promise.then(null, f) |
| 90 | +promiseThree.catch(alert); // montre l'erreur "Error: Whoops!" après une seconde |
| 91 | +``` |
| 92 | + |
| 93 | +{% hint style="warning" %} |
| 94 | +Dans la méthode `Promise.then()`, toutes les deux fonctions de callback sont optionels. |
| 95 | +{% endhint %} |
0 commit comments