diff options
Diffstat (limited to 'files/fr/web/javascript/guide/using_promises/index.md')
| -rw-r--r-- | files/fr/web/javascript/guide/using_promises/index.md | 295 |
1 files changed, 155 insertions, 140 deletions
diff --git a/files/fr/web/javascript/guide/using_promises/index.md b/files/fr/web/javascript/guide/using_promises/index.md index 5f30035f51..95b35d1884 100644 --- a/files/fr/web/javascript/guide/using_promises/index.md +++ b/files/fr/web/javascript/guide/using_promises/index.md @@ -10,16 +10,17 @@ tags: translation_of: Web/JavaScript/Guide/Using_promises original_slug: Web/JavaScript/Guide/Utiliser_les_promesses --- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails", "Web/JavaScript/Guide/iterateurs_et_generateurs")}}</div> +{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails", "Web/JavaScript/Guide/iterateurs_et_generateurs")}} -<p>Une promesse est un objet ({{jsxref("Promise")}}) qui représente la complétion ou l'échec d'une opération asynchrone. La plupart du temps, on « consomme » des promesses et c'est donc ce que nous verrons dans la première partie de ce guide pour ensuite expliquer comment les créer.</p> +Une promesse est un objet ({{jsxref("Promise")}}) qui représente la complétion ou l'échec d'une opération asynchrone. La plupart du temps, on « consomme » des promesses et c'est donc ce que nous verrons dans la première partie de ce guide pour ensuite expliquer comment les créer. -<p>En résumé, une promesse est un objet qui est renvoyé et auquel on attache des <em>callbacks</em> plutôt que de passer des <em>callbacks</em> à une fonction. Ainsi, au lieu d'avoir une fonction qui prend deux <em>callbacks</em> en arguments :</p> +En résumé, une promesse est un objet qui est renvoyé et auquel on attache des _callbacks_ plutôt que de passer des _callbacks_ à une fonction. Ainsi, au lieu d'avoir une fonction qui prend deux _callbacks_ en arguments : -<pre class="brush: js">function faireQqcALAncienne(successCallback, failureCallback){ +```js +function faireQqcALAncienne(successCallback, failureCallback){ console.log("C'est fait"); // réussir une fois sur deux - if (Math.random() > .5) { + if (Math.random() > .5) { successCallback("Réussite"); } else { failureCallback("Échec"); @@ -36,16 +37,16 @@ function failureCallback(erreur) { } faireQqcALAncienne(successCallback, failureCallback); +``` -</pre> +On aura une fonction qui renvoie une promesse et on attachera les callbacks sur cette promesse : -<p>On aura une fonction qui renvoie une promesse et on attachera les callbacks sur cette promesse :</p> - -<pre class="brush: js">function faireQqc() { - return new Promise((successCallback, failureCallback) => { +```js +function faireQqc() { + return new Promise((successCallback, failureCallback) => { console.log("C'est fait"); // réussir une fois sur deux - if (Math.random() > .5) { + if (Math.random() > .5) { successCallback("Réussite"); } else { failureCallback("Échec"); @@ -55,58 +56,61 @@ faireQqcALAncienne(successCallback, failureCallback); const promise = faireQqc(); promise.then(successCallback, failureCallback); -</pre> +``` -<p>ou encore :</p> +ou encore : -<pre class="brush: js">faireQqc().then(successCallback, failureCallback); -</pre> +```js +faireQqc().then(successCallback, failureCallback); +``` -<p>Cette dernière forme est ce qu'on appelle <em>un appel de fonction asynchrone</em>. Cette convention possède différents avantages dont le premier est <em>le chaînage</em>.</p> +Cette dernière forme est ce qu'on appelle _un appel de fonction asynchrone_. Cette convention possède différents avantages dont le premier est _le chaînage_. -<h2 id="Garanties">Garanties</h2> +## Garanties -<p>À la différence des imbrications de <em>callbacks</em>, une promesse apporte certaines garanties :</p> +À la différence des imbrications de _callbacks_, une promesse apporte certaines garanties : -<ul> - <li>Les <em>callbacks</em> ne seront jamais appelés avant la fin du parcours de la boucle d'évènements JavaScript courante</li> - <li>Les <em>callbacks</em> ajoutés grâce à <code>then</code> seront appelés, y compris après le succès ou l'échec de l'opération asynchrone</li> - <li>Plusieurs <em>callbacks</em> peuvent être ajoutés en appelant <code>then</code> plusieurs fois, ils seront alors exécutés l'un après l'autre selon l'ordre dans lequel ils ont été insérés.</li> -</ul> +- Les _callbacks_ ne seront jamais appelés avant la fin du parcours de la boucle d'évènements JavaScript courante +- Les _callbacks_ ajoutés grâce à `then` seront appelés, y compris après le succès ou l'échec de l'opération asynchrone +- Plusieurs _callbacks_ peuvent être ajoutés en appelant `then` plusieurs fois, ils seront alors exécutés l'un après l'autre selon l'ordre dans lequel ils ont été insérés. -<h2 id="Chaînage_des_promesses">Chaînage des promesses</h2> +## Chaînage des promesses -<p>Un besoin fréquent est d'exécuter deux ou plus d'opérations asynchrones les unes à la suite des autres, avec chaque opération qui démarre lorsque la précédente a réussi et en utilisant le résultat de l'étape précédente. Ceci peut être réalisé en créant une chaîne de promesses.</p> +Un besoin fréquent est d'exécuter deux ou plus d'opérations asynchrones les unes à la suite des autres, avec chaque opération qui démarre lorsque la précédente a réussi et en utilisant le résultat de l'étape précédente. Ceci peut être réalisé en créant une chaîne de promesses. -<p>La méthode <code>then()</code> renvoie une <em>nouvelle</em> promesse, différente de la première :</p> +La méthode `then()` renvoie une _nouvelle_ promesse, différente de la première : -<pre class="brush: js">const promise = faireQqc(); +```js +const promise = faireQqc(); const promise2 = promise.then(successCallback, failureCallback); -</pre> +``` -<p>ou encore :</p> +ou encore : -<pre class="brush: js">const promise2 = faireQqc().then(successCallback, failureCallback); -</pre> +```js +const promise2 = faireQqc().then(successCallback, failureCallback); +``` -<p>La deuxième promesse (<code>promise2</code>) indique l'état de complétion, pas uniquement pour <code>faireQqc()</code> mais aussi pour le callback qui lui a été passé (<code>successCallback</code> ou <code>failureCallback</code>) qui peut aussi être une fonction asynchrone qui renvoie une promesse. Lorsque c'est le cas, tous les <em>callbacks</em> ajoutés à <code>promise2</code> forment une file derrière la promesse renvoyée par <code>successCallback</code> ou <code>failureCallback</code>.</p> +La deuxième promesse (`promise2`) indique l'état de complétion, pas uniquement pour `faireQqc()` mais aussi pour le callback qui lui a été passé (`successCallback` ou `failureCallback`) qui peut aussi être une fonction asynchrone qui renvoie une promesse. Lorsque c'est le cas, tous les _callbacks_ ajoutés à `promise2` forment une file derrière la promesse renvoyée par `successCallback` ou `failureCallback`. -<p>Autrement dit, chaque promesse représente l'état de complétion d'une étape asynchrone au sein de cette succession d'étapes.</p> +Autrement dit, chaque promesse représente l'état de complétion d'une étape asynchrone au sein de cette succession d'étapes. -<p>Auparavant, l'enchaînement de plusieurs opérations asynchrones déclenchait une pyramide dantesque de <em>callbacks</em> :</p> +Auparavant, l'enchaînement de plusieurs opérations asynchrones déclenchait une pyramide dantesque de _callbacks_ : -<pre class="brush: js">faireQqc(function(result) { +```js +faireQqc(function(result) { faireAutreChose(result, function(newResult) { faireUnTroisiemeTruc(newResult, function(finalResult) { console.log('Résultat final :' + finalResult); }, failureCallback); }, failureCallback); }, failureCallback); -</pre> +``` -<p>Grâce à des fonctions plus modernes et aux promesses, on attache les <em>callbacks</em> aux promesses qui sont renvoyées. On peut ainsi construire une <em>chaîne de promesses</em> :</p> +Grâce à des fonctions plus modernes et aux promesses, on attache les _callbacks_ aux promesses qui sont renvoyées. On peut ainsi construire une _chaîne de promesses_ : -<pre class="brush: js">faireQqc().then(function(result) { +```js +faireQqc().then(function(result) { return faireAutreChose(result); }) .then(function(newResult) { @@ -116,68 +120,69 @@ const promise2 = promise.then(successCallback, failureCallback); console.log('Résultat final : ' + finalResult); }) .catch(failureCallback); -</pre> +``` -<p>Les arguments passés à <code>then</code> sont optionnels. La forme <code>catch(failureCallback)</code> est un alias plus court pour <code>then(null, failureCallback)</code>. Ces chaînes de promesses sont parfois construites avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">des fonctions fléchées</a> :</p> +Les arguments passés à `then` sont optionnels. La forme `catch(failureCallback)` est un alias plus court pour `then(null, failureCallback)`. Ces chaînes de promesses sont parfois construites avec [des fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées) : -<pre class="brush: js">faireQqc() -.then(result => faireAutreChose(result)) -.then(newResult => faireUnTroisiemeTruc(newResult)) -.then(finalResult => { +```js +faireQqc() +.then(result => faireAutreChose(result)) +.then(newResult => faireUnTroisiemeTruc(newResult)) +.then(finalResult => { console.log('Résultat final : ' + finalResult); }) .catch(failureCallback); -</pre> +``` -<div class="warning"> -<p><strong>Attention :</strong> cela implique que les fonctions asynchrones renvoient toutes des promesses, sinon les <em>callbacks</em> ne pourront être chaînés et les erreurs ne seront pas interceptées (les fonctions fléchées ont une valeur de retour implicite si les accolades ne sont pas utilisées : <code>() => x</code> est synonyme de <code>() => { return x; }</code>).</p> -</div> +> **Attention :** cela implique que les fonctions asynchrones renvoient toutes des promesses, sinon les _callbacks_ ne pourront être chaînés et les erreurs ne seront pas interceptées (les fonctions fléchées ont une valeur de retour implicite si les accolades ne sont pas utilisées : `() => x` est synonyme de `() => { return x; }`). -<h3 id="Chaînage_après_un_catch">Chaînage après un catch</h3> +### Chaînage après un catch -<p>Il est possible de chaîner de nouvelles actions <em>après</em> un rejet, c'est-à-dire un <code>catch</code>. C'est utile pour accomplir de nouvelles actions après qu'une action ait échoué dans la chaine. Par exemple :</p> +Il est possible de chaîner de nouvelles actions _après_ un rejet, c'est-à-dire un `catch`. C'est utile pour accomplir de nouvelles actions après qu'une action ait échoué dans la chaine. Par exemple : -<pre class="brush: js">new Promise((resolve, reject) => { +```js +new Promise((resolve, reject) => { console.log('Initial'); resolve(); }) -.then(() => { +.then(() => { throw new Error('Something failed'); console.log('Do this'); }) -.catch(() => { +.catch(() => { console.error('Do that'); }) -.then(() => { +.then(() => { console.log('Do this whatever happened before'); }); -</pre> +``` -<p>Cela va produire la sortie suivante :</p> +Cela va produire la sortie suivante : -<pre>Initial -Do that -Do this whatever happened before -</pre> + Initial + Do that + Do this whatever happened before -<p>Notez que le texte <q>Do this</q> n'est pas affiché car l'erreur <q>Something failed</q> a produit un rejet.</p> +Notez que le texte "Do this" n'est pas affiché car l'erreur "Something failed" a produit un rejet. -<h2 id="Propagation_des_erreurs">Propagation des erreurs</h2> +## Propagation des erreurs -<p>Dans les exemples précédents, <code>failureCallback</code> était présent trois fois dans la pyramide de <em>callbacks</em> et une seule fois, à la fin, dans la chaîne des promesses :</p> +Dans les exemples précédents, `failureCallback` était présent trois fois dans la pyramide de _callbacks_ et une seule fois, à la fin, dans la chaîne des promesses : -<pre class="brush: js">faireQqc() -.then(result => faireAutreChose(result)) -.then(newResult => faireUnTroisiemeTruc(newResult)) -.then(finalResult => console.log('Résultat final : ' + finalResult)) +```js +faireQqc() +.then(result => faireAutreChose(result)) +.then(newResult => faireUnTroisiemeTruc(newResult)) +.then(finalResult => console.log('Résultat final : ' + finalResult)) .catch(failureCallback); -</pre> +``` -<p>En fait, dès qu'une exception est levée, la chaîne de promesses utilisera le premier <code>catch()</code> ou <code>onRejected</code> disponible. Ce fonctionnement est assez proche de ce qu'on peut trouver pour du code synchrone :</p> +En fait, dès qu'une exception est levée, la chaîne de promesses utilisera le premier `catch()` ou `onRejected` disponible. Ce fonctionnement est assez proche de ce qu'on peut trouver pour du code synchrone : -<pre class="brush: js">try { +```js +try { const result = syncFaireQqc(); const newResult = syncFaireQqcAutre(result); const finalResult = syncFaireUnTroisiemeTruc(newResult); @@ -185,11 +190,12 @@ Do this whatever happened before } catch(error) { failureCallback(error); } -</pre> +``` -<p>Cette symétrie entre le code asynchrone et le code synchrone atteint son paroxysme avec le couple d'opérateurs <a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function"><code>async</code>/<code>await</code></a> d'ECMAScript 2017:</p> +Cette symétrie entre le code asynchrone et le code synchrone atteint son paroxysme avec le couple d'opérateurs [`async`/`await`](/fr/docs/Web/JavaScript/Reference/Instructions/async_function) d'ECMAScript 2017: -<pre class="brush: js">async function toto() { +```js +async function toto() { try { const result = await faireQqc(); const newResult = await faireQqcAutre(result); @@ -199,117 +205,126 @@ Do this whatever happened before failureCallback(error); } } -</pre> +``` -<p>Ce fonctionnement est construit sur les promesses et <code>faireQqc()</code> est la même fonction que celle utilisée dans les exemples précédents.</p> +Ce fonctionnement est construit sur les promesses et `faireQqc()` est la même fonction que celle utilisée dans les exemples précédents. -<p>Les promesses permettent de résoudre les problèmes de cascades infernales de <em>callbacks</em> notamment en interceptant les différentes erreurs (exceptions et erreurs de programmation). Ceci est essentiel pour obtenir une composition fonctionnelle des opérations asynchrones.</p> +Les promesses permettent de résoudre les problèmes de cascades infernales de _callbacks_ notamment en interceptant les différentes erreurs (exceptions et erreurs de programmation). Ceci est essentiel pour obtenir une composition fonctionnelle des opérations asynchrones. -<h2 id="Évènements_liés_à_la_rupture_dune_promesse">Évènements liés à la rupture d'une promesse</h2> +## Évènements liés à la rupture d'une promesse -<p>Lorsqu'une promesse est rompue/rejetée, un des deux évènements suivants est envoyé au niveau de la portée globale ({{domxref("window")}} ou {{domxref("Worker")}} si le script est utilisé dans un <em>worker</em>) :</p> +Lorsqu'une promesse est rompue/rejetée, un des deux évènements suivants est envoyé au niveau de la portée globale ({{domxref("window")}} ou {{domxref("Worker")}} si le script est utilisé dans un _worker_) : -<dl> - <dt>{{domxref("Window.rejectionhandled_event","rejectionhandled")}}</dt> - <dd>Cet évènement est envoyé lorsqu'une promesse est rompue et après que le rejet ai été traité par la fonction <code>reject</code> associée à la promesse.</dd> - <dt>{{domxref("Window.unhandledrejection_event","unhandledrejection")}}</dt> - <dd>Cet évènement est envoyé lorsque la promesse est rompue et qu'aucune fonction n'a été définie pour gérer le rejet de la promesse.</dd> -</dl> +- {{domxref("Window.rejectionhandled_event","rejectionhandled")}} + - : Cet évènement est envoyé lorsqu'une promesse est rompue et après que le rejet ai été traité par la fonction `reject` associée à la promesse. +- {{domxref("Window.unhandledrejection_event","unhandledrejection")}} + - : Cet évènement est envoyé lorsque la promesse est rompue et qu'aucune fonction n'a été définie pour gérer le rejet de la promesse. -<p>Dans les deux cas, l'évènement (dont le type est {{domxref("PromiseRejectionEvent")}}) aura deux propriétés :</p> +Dans les deux cas, l'évènement (dont le type est {{domxref("PromiseRejectionEvent")}}) aura deux propriétés : -<dl> - <dt>{{domxref("PromiseRejectionEvent.promise","promise")}}</dt> - <dd>La promesse qui a été rompue.</dd> - <dt>{{domxref("PromiseRejectionEvent.reason","reason")}}</dt> - <dd>La raison pour laquelle la promesse a été rompue.</dd> -</dl> +- {{domxref("PromiseRejectionEvent.promise","promise")}} + - : La promesse qui a été rompue. +- {{domxref("PromiseRejectionEvent.reason","reason")}} + - : La raison pour laquelle la promesse a été rompue. -<p>Gérer ces évènements permet d'avoir une ultime méthode pour gérer le rejet des promesses. Cela peut notamment s'avérer utile pour le débogage. Ces évènements sont déclenchés au niveau global et permettent ainsi d'intercepter les erreurs pour chaque contexte (fenêtre ou <em>worker</em>)</p> +Gérer ces évènements permet d'avoir une ultime méthode pour gérer le rejet des promesses. Cela peut notamment s'avérer utile pour le débogage. Ces évènements sont déclenchés au niveau global et permettent ainsi d'intercepter les erreurs pour chaque contexte (fenêtre ou _worker_) -<pre class="brush: js">window.addEventListener("unhandledrejection", event => { +```js +window.addEventListener("unhandledrejection", event => { // Examiner la ou les promesse(s) qui posent problème en debug // Nettoyer ce qui doit l'être quand ça se produit en réel -}, false);</pre> +}, false); +``` -<h2 id="Envelopper_les_callbacks_des_API">Envelopper les <em>callbacks</em> des API</h2> +## Envelopper les _callbacks_ des API -<p>Il est possible de créer un objet {{jsxref("Promise")}} grâce à son constructeur. Et même si, idéalement, cela ne devrait pas être nécessaire, certaines API fonctionnent toujours avec des <em>callbacks</em> passés en arguments. C'est notamment le cas de la méthode {{domxref("WindowTimers.setTimeout", "setTimeout()")}} :</p> +Il est possible de créer un objet {{jsxref("Promise")}} grâce à son constructeur. Et même si, idéalement, cela ne devrait pas être nécessaire, certaines API fonctionnent toujours avec des _callbacks_ passés en arguments. C'est notamment le cas de la méthode {{domxref("WindowTimers.setTimeout", "setTimeout()")}} : -<pre class="brush: js">setTimeout(() => saySomething("10 seconds passed"), 10 * 1000); -</pre> +```js +setTimeout(() => saySomething("10 seconds passed"), 10 * 1000); +``` -<p>Si on mélange des <em>callbacks</em> et des promesses, cela sera problématique. Si <code>saySomething</code> échoue ou contient des erreurs, rien n'interceptera l'erreur.</p> +Si on mélange des _callbacks_ et des promesses, cela sera problématique. Si `saySomething` échoue ou contient des erreurs, rien n'interceptera l'erreur. -<p>Pour ces fonctions, la meilleure pratique consiste à les <em>envelopper</em> dans des promesses au plus bas niveau possible et de ne plus les appeler directement :</p> +Pour ces fonctions, la meilleure pratique consiste à les _envelopper_ dans des promesses au plus bas niveau possible et de ne plus les appeler directement : -<pre class="brush: js">const wait = ms => new Promise(resolve => setTimeout(resolve, ms)); +```js +const wait = ms => new Promise(resolve => setTimeout(resolve, ms)); -wait(10 * 1000).then(() => saySomething("10 seconds")).catch(failureCallback); -</pre> +wait(10 * 1000).then(() => saySomething("10 seconds")).catch(failureCallback); +``` -<p>Le constructeur <code>Promise</code> prend en argument une fonction et nous permet de la convertir manuellement en une promesse. Ici, vu que <code>setTimeout</code> n'échoue pas vraiment, on laisse de côté la gestion de l'échec.</p> +Le constructeur `Promise` prend en argument une fonction et nous permet de la convertir manuellement en une promesse. Ici, vu que `setTimeout` n'échoue pas vraiment, on laisse de côté la gestion de l'échec. -<h2 id="Composition">Composition</h2> +## Composition -<p>{{jsxref("Promise.resolve()")}} et {{jsxref("Promise.reject()")}} sont des méthodes qui permettent de créer des promesses déjà tenues ou rompues.</p> +{{jsxref("Promise.resolve()")}} et {{jsxref("Promise.reject()")}} sont des méthodes qui permettent de créer des promesses déjà tenues ou rompues. -<p>{{jsxref("Promise.all()")}} et {{jsxref("Promise.race()")}} sont deux outils de composition qui permettent de mener des opérations asynchrones en parallèle.</p> +{{jsxref("Promise.all()")}} et {{jsxref("Promise.race()")}} sont deux outils de composition qui permettent de mener des opérations asynchrones en parallèle. -<p>On peut lancer des opérations en parallèles et attendre qu'elles soient toutes finies de cette façon :</p> +On peut lancer des opérations en parallèles et attendre qu'elles soient toutes finies de cette façon : -<pre class="brush: js">Promise.all([func1(), func2(), func3()]) -.then(([resultat1, resultat2, resultat3]) => { /* où on utilise resultat1/2/3 */ });</pre> +```js +Promise.all([func1(), func2(), func3()]) +.then(([resultat1, resultat2, resultat3]) => { /* où on utilise resultat1/2/3 */ }); +``` -<p>Il est possible de construire une composition séquentielle de la façon suivante :</p> +Il est possible de construire une composition séquentielle de la façon suivante : -<pre class="brush: js">[func1, func2].reduce((p, f) => p.then(f), Promise.resolve()); -</pre> +```js +[func1, func2].reduce((p, f) => p.then(f), Promise.resolve()); +``` -<p>Dans ce fragment de code, on réduit un tableau de fonctions asynchrones en une chaîne de promesse équivalente à : <code>Promise.resolve().then(func1).then(func2);</code></p> +Dans ce fragment de code, on réduit un tableau de fonctions asynchrones en une chaîne de promesse équivalente à : `Promise.resolve().then(func1).then(func2);` -<p>On peut également accomplir cela avec une fonction de composition réutilisable :</p> +On peut également accomplir cela avec une fonction de composition réutilisable : -<pre class="brush: js">const applyAsync = (acc, val) => acc.then(val); -const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x));</pre> +```js +const applyAsync = (acc, val) => acc.then(val); +const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x)); +``` -<p>La fonction <code>composeAsync</code> accepte autant de fonctions que nécessaire comme arguments et renvoie une nouvelle fonction qui prend une valeur initiale pour la passer à travers ces étapes de compositions. Cette façon de faire garantit que les fonctions, qu'elles soient synchrones ou asynchrones, sont exécutées dans le bon ordre :</p> +La fonction `composeAsync` accepte autant de fonctions que nécessaire comme arguments et renvoie une nouvelle fonction qui prend une valeur initiale pour la passer à travers ces étapes de compositions. Cette façon de faire garantit que les fonctions, qu'elles soient synchrones ou asynchrones, sont exécutées dans le bon ordre : -<pre class="brush: js">const transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2); -transformData(data);</pre> +```js +const transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2); +transformData(data); +``` -<p>Avec ECMAScript 2017, on peut obtenir une composition séquentielle plus simplement avec les opérateurs <code>await</code>/<code>async</code> :</p> +Avec ECMAScript 2017, on peut obtenir une composition séquentielle plus simplement avec les opérateurs `await`/`async` : -<pre class="brush: js">let result; +```js +let result; for(const f of [func1, func2, func3]) { result = await f(result); -} </pre> +} +``` -<h2 id="Gestion_du_temps">Gestion du temps</h2> +## Gestion du temps -<p>Pour éviter de mauvaises surprises, les fonctions passées à <code>then()</code> ne seront jamais appelées de façon synchrone, y compris lorsqu'il s'agit d'une promesse déjà résolue :</p> +Pour éviter de mauvaises surprises, les fonctions passées à `then()` ne seront jamais appelées de façon synchrone, y compris lorsqu'il s'agit d'une promesse déjà résolue : -<pre class="brush: js">Promise.resolve().then(() => console.log(2)); +```js +Promise.resolve().then(() => console.log(2)); console.log(1); // 1, 2 -</pre> +``` -<p>En fait, la fonction passée à <code>then</code><code>()</code> est placée dans une file de micro-tâches qui sont exécutées lorsque cette file est vidée à la fin de la boucle d'évènements JavaScript :</p> +En fait, la fonction passée à ` then``() ` est placée dans une file de micro-tâches qui sont exécutées lorsque cette file est vidée à la fin de la boucle d'évènements JavaScript : -<pre class="brush: js">var wait = ms => new Promise(resolve => setTimeout(resolve, ms)); +```js +var wait = ms => new Promise(resolve => setTimeout(resolve, ms)); -wait().then(() => console.log(4)); -Promise.resolve().then(() => console.log(2)).then(() => console.log(3)); +wait().then(() => console.log(4)); +Promise.resolve().then(() => console.log(2)).then(() => console.log(3)); console.log(1); // 1, 2, 3, 4 -</pre> +``` -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{jsxref("Promise.then()")}}</li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function"><code>async</code>/<code>await</code></a></li> - <li><a href="http://promisesaplus.com/">La spécification Promises/A+</a></li> - <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson : We have a problem with promises — Common mistakes with promises (article en anglais)</a></li> -</ul> +- {{jsxref("Promise.then()")}} +- [`async`/`await`](/fr/docs/Web/JavaScript/Reference/Instructions/async_function) +- [La spécification Promises/A+](http://promisesaplus.com/) +- [Nolan Lawson : We have a problem with promises — Common mistakes with promises (article en anglais)](http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html) -<p>{{PreviousNext("Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails", "Web/JavaScript/Guide/iterateurs_et_generateurs")}}</p> +{{PreviousNext("Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails", "Web/JavaScript/Guide/iterateurs_et_generateurs")}} |