diff options
Diffstat (limited to 'files/fr/conflicting/learn/javascript/asynchronous')
3 files changed, 1203 insertions, 0 deletions
diff --git a/files/fr/conflicting/learn/javascript/asynchronous/index.md b/files/fr/conflicting/learn/javascript/asynchronous/index.md new file mode 100644 index 0000000000..b2b9afbcd1 --- /dev/null +++ b/files/fr/conflicting/learn/javascript/asynchronous/index.md @@ -0,0 +1,440 @@ +--- +title: Choisir la bonne approche +slug: conflicting/Learn/JavaScript/Asynchronous +tags: + - Beginner + - Intervals + - JavaScript + - Learn + - Optimize + - Promises + - async + - asynchronous + - await + - requestAnimationFrame + - setInterval + - setTimeout + - timeouts +translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach +original_slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach +--- +{{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}} + +Pour terminer ce module, nous vous proposons une brève discussion sur les différentes techniques et fonctionnalités asynchrones abordées tout au long de ce module, en examinant laquelle de ces techniques est la plus pertinente en fonction de la situation ainsi que des recommandations et des rappels des pièges courants le cas échéant. + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Connaissances informatiques de base, une compréhension raisonnable des + principes fondamentaux de JavaScript. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Être capable de faire un choix judicieux quant à l'utilisation de + différentes techniques de programmation asynchrone. + </td> + </tr> + </tbody> +</table> + +## Fonctions de rappels (callbacks) asynchrones + +Généralement trouvé dans les API à l'ancienne, une fonction de rappel (ou _callback_ en anglais) implique qu'une fonction soit passée en paramètre à une autre fonction, qui est ensuite invoquée lorsqu'une opération asynchrone est terminée afin réaliser une opération avec le résultat. C'est la méthode qui précédait l'arrivée des promesses : elle n'est pas aussi efficace ou flexible. Ne l'utilisez que si nécessaire. + +| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples | +| ------------------------- | ----------------------- | ---------------------------------- | -------------------------------- | +| Non | Oui (rappels récursifs) | Oui (rappels imbriqués) | Non | + +### Exemple de code + +Un exemple qui charge une ressource via l'API [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) ([l'exécuter en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html), et [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html)) : + +```js +function loadAsset(url, type, callback) { + let xhr = new XMLHttpRequest(); + xhr.open('GET', url); + xhr.responseType = type; + + xhr.onload = function() { + callback(xhr.response); + }; + + xhr.send(); +} + +function displayImage(blob) { + let objectURL = URL.createObjectURL(blob); + + let image = document.createElement('img'); + image.src = objectURL; + document.body.appendChild(image); +} + +loadAsset('coffee.jpg', 'blob', displayImage); +``` + +### Pièges + +- Les fonctions de rappels imbriquées peuvent être encombrantes et difficiles à lire (ce qu'on appelle parfois « _callback hell_ » en anglais). +- Les fonctions de rappel pour les cas d'erreur doivent être appelés une fois pour chaque niveau d'imbrication, alors qu'avec les promesses, vous pouvez simplement utiliser un seul bloc `.catch()` pour gérer les erreurs de toute la chaîne. +- Les fonctions de rappel asynchrones ne sont pas très élégantes. +- Les fonctions de rappel passées en argument de promesses sont toujours appelés dans l'ordre strict où ils sont placés dans la file d'attente des événements ; les fonctions de rappel asynchrones ne le sont pas. +- Les fonctions de rappel asynchrones perdent le contrôle total de la façon dont la fonction sera exécutée lorsqu'elle est transmise à une bibliothèque tierce. + +### Compatibilité des navigateurs + +Très bonne prise en charge générale, bien que la prise en charge exacte dans les différentes API dépende de l'API en question. Reportez-vous à la documentation de référence de l'API que vous utilisez pour obtenir des informations plus spécifiques. + +### Plus d'informations + +- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing), en particulier les [Fonctions de rappels asynchrones](/fr/docs/Learn/JavaScript/Asynchronous/Introducing#async_callbacks) + +## setTimeout() + +[`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) est une méthode qui permet d'exécuter une fonction après l'écoulement d'un délai arbitraire. + +| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples | +| ------------------------- | ---------------------- | ---------------------------------- | -------------------------------- | +| Oui | Oui (délais récursifs) | Oui (délais d'attente imbriqués) | Non | + +### Exemple de code + +Ici, le navigateur attendra deux secondes avant d'exécuter la fonction anonyme, puis affichera le message dans la console ([voir son exécution en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html), et [voir le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html)) : + +```js +let myGreeting = setTimeout(function() { + console.log('Bonjour, M. Univers !'); +}, 2000) +``` + +### Pièges + +Vous pouvez utiliser des appels récursifs à `setTimeout()` pour exécuter une fonction de manière répétée de façon similaire à `setInterval()`, en utilisant un code comme celui-ci : + +```js +let i = 1; +setTimeout(function run() { + console.log(i); + i++; + + setTimeout(run, 100); +}, 100); +``` + +Il existe une différence entre `setTimeout()` appelé récursivement et `setInterval()` : + +- Les récursions avec `setTimeout()` garantissent qu'au moins le temps spécifié (100ms dans cet exemple) s'écoulera entre les exécutions ; le code s'exécutera puis attendra 100 millisecondes avant de s'exécuter à nouveau. L'intervalle sera le même quelle que soit la durée d'exécution du code. +- Avec `setInterval()`, l'intervalle que nous choisissons _inclut_ le temps d'exécution du code que nous voulons exécuter. Disons que le code prend 40 millisecondes pour s'exécuter — l'intervalle finit alors par n'être que de 60 millisecondes. + +Lorsque votre code a le potentiel de prendre plus de temps à s'exécuter que l'intervalle de temps que vous avez assigné, il est préférable d'utiliser `setTimeout()` récursivement - cela maintiendra l'intervalle de temps constant entre les exécutions, quelle que soit la durée d'exécution du code, et vous n'obtiendrez pas d'erreurs. + +### Compatibilité des navigateurs + +{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}} + +### Plus d'informations + +- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [`setTimeout()`](</fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#settimeout()>) +- Page de référence pour [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) + +## setInterval() + +[`setInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) est une méthode qui permet d'exécuter une fonction de façon répétée avec des intervalles de temps donnés entre chaque exécution. Cette méthode n'est pas aussi efficace que [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame), mais elle permet de choisir le rythme d'exécution. + +| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples | +| ------------------------- | ----------------- | ------------------------------------------ | -------------------------------- | +| Non | Oui | Non (à moins qu'elles ne soient les mêmes) | Non | + +### Exemple de code + +La fonction suivante crée un nouvel objet [`Date()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), en extrait une chaîne de temps à l'aide de [`toLocaleTimeString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString), puis l'affiche dans l'interface utilisateur. Nous l'exécutons ensuite une fois par seconde à l'aide de `setInterval()`, créant l'effet d'une horloge numérique qui se met à jour une fois par seconde ([voir cela en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), et aussi [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html)) : + +```js +function displayTime() { + let date = new Date(); + let time = date.toLocaleTimeString(); + document.getElementById('demo').textContent = time; +} + +const createClock = setInterval(displayTime, 1000); +``` + +### Pièges + +- La fréquence d'exécution et d'affichage n'est pas optimisée pour le système sur lequel l'animation est exécutée, et peut être quelque peu inefficace. À moins que vous n'ayez besoin de choisir un framerate spécifique (plus lent), il est généralement préférable d'utiliser `requestAnimationFrame()`. + +### Compatibilité des navigateurs + +{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}} + +### Plus d'informations + +- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [setInterval()](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) +- Page de référence pour [setInterval()](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) + +## requestAnimationFrame() + +[`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) est une méthode qui vous permet d'exécuter une fonction de manière répétée, et efficace, à la meilleure fréquence de rafraîchissement disponible compte tenu du navigateur/système actuel. Vous devriez, dans la mesure du possible, utiliser cette méthode au lieu de `setInterval()`/`setTimeout()` récursif, sauf si vous avez besoin d'une fréquence de rafraîchissement spécifique. + +| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples | +| ------------------------- | ----------------- | ----------------------------------- | -------------------------------- | +| Non | Oui | Non (à moins que ce soit les mêmes) | Non | + +### Exemple de code + +Une toupie animée simple ; vous pouvez trouver cet [exemple en direct sur GitHub](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html)) : + +```js +const spinner = document.querySelector('div'); +let rotateCount = 0; +let startTime = null; +let rAF; + +function draw(timestamp) { + if(!startTime) { + startTime = timestamp; + } + + rotateCount = (timestamp - startTime) / 3; + + if(rotateCount > 359) { + rotateCount %= 360; + } + + spinner.style.transform = 'rotate(' + rotateCount + 'deg)'; + + rAF = requestAnimationFrame(draw); +} + +draw(); +``` + +### Pièges + +- Vous ne pouvez pas choisir une fréquence d'images spécifique avec `requestAnimationFrame()`. Si vous devez exécuter votre animation à un _framerate_ plus lent, vous devrez utiliser `setInterval()` ou `setTimeout()` récursif. + +### Compatibilité des navigateurs + +{{Compat("api.Window.requestAnimationFrame")}} + +### Plus d'informations + +- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [`requestAnimationFrame()`](</fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#requestanimationframe()>) +- Page de référence pour [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) + +## Promises (Promesses) + +[Les promesses](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) sont une fonctionnalité JavaScript qui permet d'exécuter des opérations asynchrones et d'attendre qu'elles soient définitivement terminées avant d'exécuter une autre opération en fonction de son résultat. Les promesses sont la colonne vertébrale du JavaScript asynchrone moderne. + +| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples | +| ------------------------- | ----------------- | ---------------------------------- | -------------------------------- | +| Non | Non | Oui | Voir `Promise.all()`, en dessous | + +### Exemple de code + +Le code suivant va chercher une image sur le serveur et l'affiche à l'intérieur d'un élément [`<img>`](/fr/docs/Web/HTML/Element/Img) ; [voyez-le aussi en direct](https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html), et voyez aussi [le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html) : + +```js +fetch('coffee.jpg') +.then(response => response.blob()) +.then(myBlob => { + let objectURL = URL.createObjectURL(myBlob); + let image = document.createElement('img'); + image.src = objectURL; + document.body.appendChild(image); +}) +.catch(e => { + console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message); +}); +``` + +### Pièges + +Les chaînes de promesses peuvent être complexes et difficiles à analyser. Si vous imbriquez un certain nombre de promesses, vous pouvez vous retrouver avec des problèmes similaires à l'enfer des rappels. Par exemple : + +```js +remotedb.allDocs({ + include_docs: true, + attachments: true +}).then(function (result) { + let docs = result.rows; + docs.forEach(function(element) { + localdb.put(element.doc).then(function(response) { + alert("Un document extrait avec un id " + element.doc._id + " et ajouté à la base de données locale."); + }).catch(function (err) { + if (err.name == 'conflict') { + localdb.get(element.doc._id).then(function (resp) { + localdb.remove(resp._id, resp._rev).then(function (resp) { +// et cetera... +``` + +Il est préférable d'utiliser la puissance de chaînage des promesses pour aller avec une structure plus plate et plus facile à analyser : + +```js +remotedb.allDocs(...).then(function (resultOfAllDocs) { + return localdb.put(...); +}).then(function (resultOfPut) { + return localdb.get(...); +}).then(function (resultOfGet) { + return localdb.put(...); +}).catch(function (err) { + console.log(err); +}); +``` + +ou encore : + +```js +remotedb.allDocs(...) +.then(resultOfAllDocs => { + return localdb.put(...); +}) +.then(resultOfPut => { + return localdb.get(...); +}) +.then(resultOfGet => { + return localdb.put(...); +}) +.catch(err => console.log(err)); +``` + +Cela couvre une grande partie des éléments de base. Pour un traitement beaucoup plus complet, voir l'excellent article [Nous avons un problème avec les promesses](https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html) (en), par Nolan Lawson. + +### Compatibilité des navigateurs + +{{Compat("javascript.builtins.Promise")}} + +### Plus d'informations + +- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises) +- [Utiliser les promesses](/fr/docs/Web/JavaScript/Guide/Using_promises) +- Page de référence pour [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) + +## Promise.all() + +Une fonction JavaScript qui vous permet d'attendre que plusieurs promesses se terminent avant d'exécuter une autre opération basée sur les résultats de toutes les autres promesses. + +| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples | +| ------------------------- | ----------------- | ---------------------------------- | -------------------------------- | +| Non | Non | Non | Oui | + +### Exemple de code + +L'exemple suivant va chercher plusieurs ressources sur le serveur, et utilise `Promise.all()` pour attendre qu'elles soient toutes disponibles avant de les afficher toutes — [le voir fonctionner](https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html), et voir son [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html) : + +```js +function fetchAndDecode(url, type) { + // Retourner la promesse de niveau supérieur, de sorte que le résultat + // de l'ensemble de la chaîne est retourné hors de la fonction + return fetch(url).then(response => { + // Selon le type de fichier recherché, utilisez la fonction appropriée pour décoder son contenu + if(type === 'blob') { + return response.blob(); + } else if(type === 'text') { + return response.text(); + } + }) + .catch(e => { + console.log(`Il y a eu un problème avec votre opération de récupération de la ressource "${url}" : ` + e.message); + }); +} + +// Appeler la méthode fetchAndDecode() pour récupérer les images et le texte +// et stocker leurs promesses dans des variables +let coffee = fetchAndDecode('coffee.jpg', 'blob'); +let tea = fetchAndDecode('tea.jpg', 'blob'); +let description = fetchAndDecode('description.txt', 'text'); + +// Utiliser Promise.all() pour exécuter le code uniquement lorsque +// les trois appels de fonction ont été résolus +Promise.all([coffee, tea, description]).then(values => { + console.log(values); + // Stocker chaque valeur retournée par les promesses dans des variables séparées ; + // créer des URL d'objets à partir des blobs. + let objectURL1 = URL.createObjectURL(values[0]); + let objectURL2 = URL.createObjectURL(values[1]); + let descText = values[2]; + + // Afficher les images dans les éléments <img> + let image1 = document.createElement('img'); + let image2 = document.createElement('img'); + image1.src = objectURL1; + image2.src = objectURL2; + document.body.appendChild(image1); + document.body.appendChild(image2); + + // Afficher le texte d'un paragraphe + let para = document.createElement('p'); + para.textContent = descText; + document.body.appendChild(para); +}); +``` + +### Pièges + +- Si `Promesse.all()` est rejeté, alors une ou plusieurs des promesses que vous lui fournissez dans son paramètre de tableau doivent être rejetées, ou pourraient ne pas retourner de promesses du tout. Vous devez vérifier chacune d'entre elles pour voir ce qu'elles ont retourné. + +### Compatibilité des navigateurs + +{{Compat("javascript.builtins.Promise.all")}} + +### Plus d'informations + +- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises#running_code_in_response_to_multiple_promises_fulfilling) +- Page de référence pour [`Promise.all()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) + +## async/await + +Un outil syntaxique construit sur les promesses qui vous permet d'exécuter des opérations asynchrones en utilisant une syntaxe qui ressemble plus à l'écriture de code de rappel synchrone. + +| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples | +| ------------------------- | ----------------- | ---------------------------------- | ----------------------------------------- | +| Non | Non | Oui | Oui (en combinaison avec `Promise.all()`) | + +### Exemple de code + +L'exemple suivant est un remaniement de l'exemple simple de promesse que nous avons vu précédemment, qui récupère et affiche une image, écrit à l'aide d'async/await ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html), et voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html)) : + +```js +async function myFetch() { + let response = await fetch('coffee.jpg'); + let myBlob = await response.blob(); + + let objectURL = URL.createObjectURL(myBlob); + let image = document.createElement('img'); + image.src = objectURL; + document.body.appendChild(image); +} + +myFetch(); +``` + +### Pièges + +- Vous ne pouvez pas utiliser l'opérateur `await` à l'intérieur d'une fonction non-`async`, ou dans le contexte de haut niveau de votre code. Cela peut parfois entraîner la création d'une fonction encapsulante supplémentaire, ce qui peut être légèrement frustrant dans certaines circonstances. Mais cela en vaut la peine la plupart du temps. +- Le support des navigateurs pour `async`/`await` n'est pas aussi bon que celui des promesses. Si vous souhaitez utiliser `async`/`await` mais que vous êtes préoccupé par la prise en charge de navigateurs plus anciens, vous pouvez envisager d'utiliser la bibliothèque [BabelJS](https://babeljs.io/) — cela vous permet d'écrire vos applications en utilisant le JavaScript le plus récent et de laisser Babel déterminer les modifications éventuellement nécessaires pour les navigateurs de vos utilisateurs. + +### Compatibilité des navigateurs + +{{Compat("javascript.statements.async_function")}} + +### Plus d'informations + +- [Faciliter la programmation asynchrone avec `async` et `await`](/fr/docs/Learn/JavaScript/Asynchronous/Async_await) +- Page de référence pour [les fonctions asynchrones](/fr/docs/Web/JavaScript/Reference/Statements/async_function) +- Page de référence pour l'opérateur [await](/fr/docs/Web/JavaScript/Reference/Operators/await) + +{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}} + +## Dans ce module + +- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts) +- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing) +- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals) +- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises) +- [Faciliter la programmation asynchrone avec `async` et `await`](/fr/docs/Learn/JavaScript/Asynchronous/Async_await) +- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach) diff --git a/files/fr/conflicting/learn/javascript/asynchronous/introducing/index.md b/files/fr/conflicting/learn/javascript/asynchronous/introducing/index.md new file mode 100644 index 0000000000..2fadd1a162 --- /dev/null +++ b/files/fr/conflicting/learn/javascript/asynchronous/introducing/index.md @@ -0,0 +1,168 @@ +--- +title: Concepts généraux de programmation asynchrone +slug: conflicting/Learn/JavaScript/Asynchronous/Introducing +tags: + - JavaScript + - Learn + - Promises + - Threads + - asynchronous + - blocking +translation_of: Learn/JavaScript/Asynchronous/Concepts +original_slug: Learn/JavaScript/Asynchronous/Concepts +--- +{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}} + +Dans cet article, nous allons passer en revue un certain nombre de concepts importants relatifs à la programmation asynchrone et à la façon dont elle se présente dans les navigateurs web et JavaScript. Vous devriez comprendre ces concepts avant de travailler sur les autres articles du module. + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Connaissances informatiques de base, compréhension raisonnable des + principes fondamentaux de JavaScript. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Comprendre les concepts de base de la programmation asynchrone et la + façon dont elles se manifestent dans les navigateurs Web et dans + JavaScript. + </td> + </tr> + </tbody> +</table> + +## Asynchrone ? + +Normalement, le code d'un programme donné se déroule sans interruption, une seule chose se produisant à la fois. Si une fonction dépend du résultat d'une autre fonction, elle doit attendre que l'autre fonction se termine et retourne sa réponse, et jusqu'à ce que cela se produise, le programme entier est essentiellement bloqué du point de vue de l'utilisateur. + +Les utilisatrices et utilisateurs de macOS, par exemple, le voient parfois avec le curseur rotatif de couleur arc-en-ciel (ou « ballon de plage », comme on l'appelle souvent). Ce curseur est la façon dont le système d'exploitation dit "le programme que vous utilisez actuellement a dû s'arrêter et attendre que quelque chose se termine, et cela prend tellement de temps que je craignais que vous vous demandiez ce qui se passe". + + + +C'est une expérience frustrante qui n'est pas une bonne utilisation de la puissance de traitement de l'ordinateur, surtout à une époque où les ordinateurs disposent de plusieurs cœurs de processeur. Il est inutile de rester assis à attendre quelque chose alors que vous pouvez laisser une tâche se dérouler sur un autre cœur de processeur et être averti quand elle a terminé. Cela vous permet d'effectuer d'autres travaux en même temps, ce qui est la base de la **programmation asynchrone**. C'est à l'environnement de programmation que vous utilisez (les navigateurs web, dans le cas du développement web) de vous fournir des API qui vous permettent d'exécuter de telles tâches de manière asynchrone. + +## Code bloquant + +Les techniques asynchrones sont très utiles, notamment dans la programmation web. Lorsqu'une application web s'exécute dans un navigateur et qu'elle exécute un morceau de code considérable sans rendre le contrôle au navigateur, ce dernier peut sembler figé. C'est ce qu'on appelle du code **bloquant** ; le navigateur est incapable de continuer à traiter les entrées de l'utilisateur et d'effectuer d'autres tâches jusqu'à ce que l'application web rende le contrôle du processeur. + +Examinons quelques exemples qui montrent ce que nous entendons par blocage. + +Dans notre exemple [simple-sync.html](https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html) ([voir le fonctionnement en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html)), nous ajoutons un écouteur d'événement de clic à un bouton de sorte que, lorsqu'il est cliqué, il exécute une opération qui prend du temps (calcule 10 millions de dates puis enregistre la dernière dans la console) et ajoute ensuite un paragraphe au DOM : + +```js +const btn = document.querySelector('button'); +btn.addEventListener('click', () => { + let myDate; + for(let i = 0; i < 10000000; i++) { + let date = new Date(); + myDate = date; + } + + console.log(myDate); + + let pElem = document.createElement('p'); + pElem.textContent = `Il s'agit d'un paragraphe nouvellement ajouté.`; + document.body.appendChild(pElem); +}); +``` + +Lorsque vous exécutez l'exemple, ouvrez votre console JavaScript, puis cliquez sur le bouton. Vous remarquerez que le paragraphe n'apparaît qu'une fois que le calcul des dates est terminé et que le message de la console a été enregistré. Le code s'exécute dans l'ordre où il apparaît dans la source, et la dernière opération ne s'exécute pas tant que la première n'est pas terminée. + +> **Note :** L'exemple précédent est très peu réaliste. Vous ne calculeriez jamais 10 millions de dates sur une véritable application web ! Il sert cependant à vous donner l'idée de base. + +Dans notre deuxième exemple, [simple-sync-ui-blocking.html](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html) ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html)), nous simulons quelque chose de légèrement plus réaliste que vous pourriez rencontrer sur une page réelle. Nous bloquons l'interactivité de l'utilisateur avec le rendu de l'interface utilisateur. Dans cet exemple, nous avons deux boutons : + +- Un bouton "Remplir le canevas" qui, lorsqu'il est cliqué, remplit le [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) disponible avec 1 million de cercles bleus. +- Un bouton "Cliquez sur moi pour l'alerte" qui, lorsqu'il est cliqué, affiche un message d'alerte. + +```js +function expensiveOperation() { + for(let i = 0; i < 1000000; i++) { + ctx.fillStyle = 'rgba(0,0,255, 0.2)'; + ctx.beginPath(); + ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false); + ctx.fill(); + } +} + +fillBtn.addEventListener('click', expensiveOperation); + +alertBtn.addEventListener('click', () => + alert('Vous avez cliqué sur moi !'); +); +``` + +Si vous cliquez sur le premier bouton, puis rapidement sur le second, vous verrez que l'alerte n'apparaît pas avant que les cercles aient fini d'être rendus. La première opération bloque la seconde jusqu'à ce qu'elle ait fini de s'exécuter. + +> **Note :** D'accord, dans notre cas, c'est laid et nous simulons l'effet de blocage, mais il s'agit d'un problème courant contre lequel les développeuses et développeurs d'applications réelles se battent sans cesse pour atténuer les impacts indésirables. + +Pourquoi ? La réponse est que JavaScript, de manière générale, ne s'exécute que sur **un seul _thread_**. À ce stade, nous devons introduire le concept de **_threads_**. + +## Les threads + +Un **_thread_** est fondamentalement un processus unique qu'un programme peut utiliser pour accomplir des tâches. Chaque _thread_ ne peut effectuer qu'une seule tâche à la fois : + + Tâche A --> Tâche B --> Tâche C + +Chaque tâche sera exécutée de manière séquentielle ; une tâche doit être terminée avant que la suivante puisse être lancée. + +Comme nous l'avons dit précédemment, de nombreux ordinateurs sont désormais dotés de plusieurs cœurs et peuvent donc faire plusieurs choses à la fois. Les langages de programmation qui prennent en charge plusieurs processus peuvent utiliser plusieurs cœurs pour accomplir de multiples tâches simultanément : + + Processus 1: Tâche A --> Tâche B + Processus 2: Tâche C --> Tâche D + +### JavaScript n'a qu'un thread + +JavaScript est traditionnellement « single-threaded ». Même avec plusieurs cœurs, vous ne pouviez le faire exécuter des tâches que sur un seul processus, appelé le **main thread**. Notre exemple ci-dessus est exécuté comme ceci : + + processus principal : Rendre des cercles dans <canvas> --> Afficher alert() + +Après un certain temps, JavaScript a gagné quelques outils pour aider à résoudre de tels problèmes. [Les Web workers](/fr/docs/Web/API/Web_Workers_API) vous permettent d'envoyer une partie du traitement JavaScript hors d'un processus distinct, appelé worker, afin que vous puissiez exécuter plusieurs morceaux JavaScript simultanément. Vous utiliserez généralement un worker pour exécuter des processus coûteux hors du processus principal afin de ne pas bloquer l'interaction avec l'utilisateur. + + Processus principal : Tâche A --> Tâche C + Processus du Worker : Tâche coûteuse B + +Dans cette optique, jetez un coup d'œil à [simple-sync-worker.html](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html) ([voyez-le fonctionner en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html)), toujours avec la console JavaScript de votre navigateur ouverte. Il s'agit d'une réécriture de notre exemple précédent qui calcule les 10 millions de dates dans un fil de travail (_worker_) séparé. Vous pouvez voir le code du _worker_ ici : [worker.js](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/worker.js). Désormais, lorsque vous cliquez sur le bouton, le navigateur est capable d'afficher le paragraphe avant que les dates n'aient fini d'être calculées. La première opération ne bloque plus la seconde et une fois que le _worker_ a fini ses calculs, la date est affichée dans la console. + +## Code asynchrone + +Les web workers sont très utiles, mais ils ont leurs limites. L'une des principales est qu'ils ne peuvent pas accéder au [DOM](/fr/docs/Glossary/DOM). Vous ne pouvez pas demander à un worker de faire directement quelque chose pour mettre à jour l'interface utilisateur. Nous n'avons pas pu rendre nos 1 million de cercles bleus à l'intérieur de notre worker ; il ne peut faire que le calcul des chiffres. + +Le deuxième problème est que, bien que le code exécuté dans un worker ne soit pas bloquant, il reste fondamentalement synchrone. Cela devient un problème lorsqu'une fonction s'appuie sur les résultats de plusieurs processus précédents pour fonctionner. Considérons les diagrammes de processus suivants : + + Processus principal : Tâche A --> Tâche B + +Dans ce cas, disons que la tâche A fait quelque chose comme récupérer une image du serveur et que la tâche B fait ensuite quelque chose à l'image comme lui appliquer un filtre. Si vous lancez la tâche A et essayez immédiatement d'exécuter la tâche B, vous obtiendrez une erreur, car l'image ne sera pas encore disponible. + + Processus principal : Tâche A --> Tâche B --> |Tâche D| + Processus du Worker : Tâche C --------------> | | + +Dans ce cas, disons que la tâche D utilise les résultats de la tâche B et de la tâche C. Si nous pouvons garantir que ces résultats seront tous deux disponibles au même moment, alors nous pourrions être OK, mais c'est peu probable. Si la tâche D tente de s'exécuter alors que l'une de ses entrées n'est pas encore disponible, elle déclenchera une erreur. + +Pour résoudre ces problèmes, les navigateurs nous permettent d'exécuter certaines opérations de manière asynchrone. Des fonctionnalités telles que [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) permettent de lancer une opération (par exemple, la récupération d'une image sur le serveur), puis d'attendre le retour du résultat avant de lancer une autre opération : + + Processus principal : Tâche A Tâche B + Promesse : |__opération asynchrone__| + +Comme l'opération se déroule ailleurs, le processus principal n'est pas bloqué pendant le traitement de l'opération asynchrone. + +Nous allons commencer à examiner comment écrire du code asynchrone dans le prochain article. C'est passionnant, non ? Bonne lecture ! + +## Conclusion + +La conception de logiciels modernes s'articule de plus en plus autour de l'utilisation de la programmation asynchrone, afin de permettre aux programmes de faire plusieurs choses à la fois. À mesure que vous utilisez des API plus récentes et plus puissantes, vous trouverez de plus en plus de cas où la seule façon de faire les choses est asynchrone. Il était autrefois difficile d'écrire du code asynchrone. Il faut encore s'y habituer, mais c'est devenu beaucoup plus facile. Dans la suite de ce module, nous étudierons plus en détail pourquoi le code asynchrone est important et comment concevoir un code qui évite certains des problèmes décrits ci-dessus. + +{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}} + +## Dans ce module + +- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts) +- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing) +- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals) +- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises) +- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await) +- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach) diff --git a/files/fr/conflicting/learn/javascript/asynchronous/promises/index.md b/files/fr/conflicting/learn/javascript/asynchronous/promises/index.md new file mode 100644 index 0000000000..93a26dd1b8 --- /dev/null +++ b/files/fr/conflicting/learn/javascript/asynchronous/promises/index.md @@ -0,0 +1,595 @@ +--- +title: Faciliter la programmation asynchrone avec async et await +slug: conflicting/Learn/JavaScript/Asynchronous/Promises +tags: + - Beginner + - CodingScripting + - Guide + - JavaScript + - Learn + - Promises + - async + - asynchronous + - await +translation_of: Learn/JavaScript/Asynchronous/Async_await +original_slug: Learn/JavaScript/Asynchronous/Async_await +--- +{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}} + +Plus récemment, les [fonctions async](/fr/docs/Web/JavaScript/Reference/Statements/async_function) et le mot-clé [`await`](/fr/docs/Web/JavaScript/Reference/Operators/await) ont été ajoutés au langage JavaScript avec l'édition intitulée ECMAScript 2017. Ces fonctionnalités agissent essentiellement comme du sucre syntaxique sur les promesses, rendant le code asynchrone plus facile à écrire et à lire par la suite. Elles font en sorte que le code asynchrone ressemble davantage au code synchrone de la vieille école, et elles valent donc la peine d'être apprises. Cet article fournit les informations à connaître. + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Connaissances informatiques de base, compréhension raisonnable des + principes fondamentaux de JavaScript, compréhension du code asynchrone + en général et des promesses. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Comprendre <code>async/await</code> et comment les utiliser.</td> + </tr> + </tbody> +</table> + +## Les bases de async/await + +L'utilisation `async/await` dans votre code comporte deux parties. + +### Le mot-clé async + +Tout d'abord, nous avons le mot-clé `async`, que vous mettez devant une déclaration de fonction pour la transformer en une [fonction asynchrone](/fr/docs/Web/JavaScript/Reference/Statements/async_function). Une fonction asynchrone est une fonction qui saura réagir à une éventuelle utilisation du mot-clé `await` pour invoquer du code asynchrone. + +Essayez de taper les lignes suivantes dans la console JS de votre navigateur : + +```js +function hello() { return "Bonjour" }; +hello(); +``` + +La fonction renvoie « Bonjour » — rien de spécial, n'est-ce pas ? + +Mais que se passe-t-il si nous transformons cette fonction en une fonction asynchrone ? Essayez ce qui suit : + +```js +async function hello() { return "Bonjour" }; +hello(); +``` + +Ah. L'invocation de la fonction renvoie maintenant une promesse. C'est l'une des caractéristiques des fonctions asynchrones - leurs valeurs de retour sont nécessairement converties en promesses. + +Vous pouvez également créer une [expression de fonction asynchrone](/fr/docs/Web/JavaScript/Reference/Operators/async_function), comme suit : + +```js +let hello = async function() { return "Bonjour" }; +hello(); +``` + +Et vous pouvez utiliser les fonctions fléchées : + +```js +let hello = async () => { return "Bonjour" }; +``` + +Elles font toutes à peu près la même chose. + +Pour consommer réellement la valeur renvoyée lorsque la promesse se réalise, puisqu'elle renvoie une promesse, nous pourrions utiliser un bloc `.then()` : + +```js +hello().then((value) => console.log(value)); +``` + +ou même simplement un raccourci tel que + +```js +hello().then(console.log); +``` + +Comme nous l'avons vu dans l'article précédent. + +Ainsi, le mot-clé `async` est ajouté aux fonctions pour leur indiquer de retourner une promesse plutôt que de retourner directement la valeur. + +### Le mot-clé await + +L'avantage d'une fonction asynchrone ne devient apparent que lorsque vous la combinez avec le mot-clé `await`. `await` ne fonctionne qu'à l'intérieur de fonctions asynchrones dans du code JavaScript ordinaire, mais il peut être utilisé seul avec [des modules JavaScript](/fr/docs/Web/JavaScript/Guide/Modules). + +`await` peut être placé devant toute fonction asynchrone basée sur une promesse pour mettre en pause votre code sur cette ligne jusqu'à ce que la promesse se réalise, puis retourner la valeur résultante. + +Vous pouvez utiliser `await` lors de l'appel de toute fonction qui renvoie une promesse, y compris les fonctions de l'API web. + +Voici un exemple trivial : + +```js +async function hello() { + return salutation = await Promise.resolve("Bonjour"); +}; + +hello().then(console.log); +``` + +Bien sûr, l'exemple ci-dessus n'est pas très utile, même s'il sert à illustrer la syntaxe. Passons maintenant à un exemple réel. + +## Réécriture du code des promesses avec async/await + +Reprenons un exemple simple de récupération que nous avons vu dans l'article précédent : + +```js +fetch('coffee.jpg') +.then(response => { + if (!response.ok) { + throw new Error(`Erreur HTTP ! statut : ${response.status}`); + } + return response.blob(); +}) +.then(myBlob => { + let objectURL = URL.createObjectURL(myBlob); + let image = document.createElement('img'); + image.src = objectURL; + document.body.appendChild(image); +}) +.catch(e => { + console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message); +}); +``` + +À ce stade, vous devriez avoir une compréhension raisonnable des promesses et de leur fonctionnement, mais convertissons le tout en utilisant async/await pour voir à quel point cela simplifie les choses : + +```js +async function myFetch() { + let response = await fetch('coffee.jpg'); + + if (!response.ok) { + throw new Error(`Erreur HTTP ! statut : ${response.status}`); + } + + let myBlob = await response.blob(); + + let objectURL = URL.createObjectURL(myBlob); + let image = document.createElement('img'); + image.src = objectURL; + document.body.appendChild(image); +} + +myFetch() +.catch(e => { + console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message); +}); +``` + +Cela rend le code beaucoup plus simple et plus facile à comprendre — plus de blocs `.then()` partout ! + +Étant donné qu'un mot-clé `async` transforme une fonction en promesse, vous pourriez remanier votre code pour utiliser une approche hybride de promesses et de `await`, en faisant sortir la seconde moitié de la fonction dans un nouveau bloc pour la rendre plus flexible : + +```js +async function myFetch() { + let response = await fetch('coffee.jpg'); + if (!response.ok) { + throw new Error(`Erreur HTTP ! statut : ${response.status}`); + } + return await response.blob(); + +} + +myFetch().then((blob) => { + let objectURL = URL.createObjectURL(blob); + let image = document.createElement('img'); + image.src = objectURL; + document.body.appendChild(image); +}).catch(e => console.log(e)); +``` + +Vous pouvez essayer de taper vous-même l'exemple, ou d'exécuter notre [exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html)). + +### Mais comment est-ce que cela fonctionne ? + +Vous remarquerez que nous avons enveloppé le code à l'intérieur d'une fonction, et que nous avons inclus le mot-clé `async` avant le mot-clé `function`. C'est nécessaire - vous devez créer une fonction async pour définir un bloc de code dans lequel vous exécuterez votre code async ; comme nous l'avons dit précédemment, `await` ne fonctionne qu'à l'intérieur de fonctions async. + +À l'intérieur de la définition de la fonction `myFetch()`, vous pouvez voir que le code ressemble beaucoup à la version précédente de la promesse, mais il y a quelques différences. Au lieu de devoir enchaîner un bloc `.then()` à la fin de chaque méthode basée sur une promesse, il suffit d'ajouter un mot-clé `await` avant l'appel de la méthode, puis d'affecter le résultat à une variable. Le mot-clé `await` fait en sorte que le moteur d'exécution JavaScript mette votre code en pause sur cette ligne, ne permettant pas à d'autres codes de s'exécuter entre-temps jusqu'à ce que l'appel de fonction asynchrone ait retourné son résultat - très utile si le code suivant dépend de ce résultat ! + +Une fois que c'est terminé, votre code continue à s'exécuter à partir de la ligne suivante. Par exemple : + +```js +let response = await fetch('coffee.jpg'); +``` + +La réponse retournée par la promesse `fetch()` remplie est affectée à la variable `response` lorsque cette réponse devient disponible, et le parseur fait une pause sur cette ligne jusqu'à ce que cela se produise. Une fois que la réponse est disponible, le parseur passe à la ligne suivante, qui crée un [`Blob`](/fr/docs/Web/API/Blob) à partir de celle-ci. Cette ligne invoque également une méthode async basée sur les promesses, nous utilisons donc `await` ici aussi. Lorsque le résultat de l'opération revient, nous le retournons hors de la fonction `myFetch()`. + +Cela signifie que lorsque nous appelons la fonction `myFetch()`, elle retourne une promesse, de sorte que nous pouvons enchaîner un `.then()` à la fin de celle-ci à l'intérieur duquel nous gérons l'affichage du blob à l'écran. + +Vous vous dites probablement déjà « c'est vraiment cool ! », et vous avez raison — moins de blocs `.then()` pour envelopper le code, et cela ressemble surtout à du code synchrone, donc c'est vraiment intuitif. + +### Ajout de la gestion des erreurs + +Si vous voulez ajouter la gestion des erreurs, vous avez plusieurs options. + +Vous pouvez utiliser une structure synchrone [`try...catch`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch) avec `async`/`await`. Cet exemple développe la première version du code que nous avons montré ci-dessus : + +```js +async function myFetch() { + try { + let response = await fetch('coffee.jpg'); + + if (!response.ok) { + throw new Error(`Erreur HTTP ! statut : ${response.status}`); + } + let myBlob = await response.blob(); + let objectURL = URL.createObjectURL(myBlob); + let image = document.createElement('img'); + image.src = objectURL; + document.body.appendChild(image); + + } catch(e) { + console.log(e); + } +} + +myFetch(); +``` + +Le bloc `catch() {}` reçoit un objet d'erreur, que nous avons appelé `e` ; nous pouvons maintenant l'enregistrer dans la console, et il nous donnera un message d'erreur détaillé montrant où dans le code l'erreur a été lancée. + +Si vous vouliez utiliser la deuxième version (remaniée) du code que nous avons montré ci-dessus, il serait préférable de continuer l'approche hybride et d'enchaîner un bloc `.catch()` à la fin de l'appel `.then()`, comme ceci : + +```js +async function myFetch() { + let response = await fetch('coffee.jpg'); + if (!response.ok) { + throw new Error(`Erreur HTTP ! statut : ${response.status}`); + } + return await response.blob(); + +} + +myFetch().then((blob) => { + let objectURL = URL.createObjectURL(blob); + let image = document.createElement('img'); + image.src = objectURL; + document.body.appendChild(image); +}) +.catch((e) => + console.log(e) +); +``` + +En effet, le bloc `.catch()` attrapera les erreurs survenant à la fois dans l'appel de fonction asynchrone et dans la chaîne de promesses. Si vous utilisiez le bloc `try`/`catch` ici, vous pourriez toujours obtenir des erreurs non gérées dans la fonction `myFetch()` lorsqu'elle est appelée. + +Vous pouvez trouver ces deux exemples sur GitHub : + +- [simple-fetch-async-await-try-catch.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html)) +- [simple-fetch-async-await-promise-catch.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html)) + +## En attente d'un Promise.all() + +`async`/`await` est construit au-dessus de [Promises](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise), il est donc compatible avec toutes les fonctionnalités offertes par les promesses. Cela inclut [`Promise.all()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) — vous pouvez tout à fait attendre un appel `Promise.all()` pour obtenir tous les résultats retournés dans une variable d'une manière qui ressemble à du simple code synchrone. Encore une fois, revenons à [un exemple que nous avons vu dans notre article précédent](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html). Gardez-le ouvert dans un onglet séparé afin de pouvoir le comparer avec la nouvelle version présentée ci-dessous. + +En convertissant cela en `async`/`await` (voir la [démo live](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html) et le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html)), cela ressemble maintenant à ceci : + +```js +async function fetchAndDecode(url, type) { + let response = await fetch(url); + + let content; + + if (!response.ok) { + throw new Error(`Erreur HTTP ! statut : ${response.status}`); + } else { + if(type === 'blob') { + content = await response.blob(); + } else if(type === 'text') { + content = await response.text(); + } + } + + return content; +} + +async function displayContent() { + let coffee = fetchAndDecode('coffee.jpg', 'blob'); + let tea = fetchAndDecode('tea.jpg', 'blob'); + let description = fetchAndDecode('description.txt', 'text'); + + let values = await Promise.all([coffee, tea, description]); + + let objectURL1 = URL.createObjectURL(values[0]); + let objectURL2 = URL.createObjectURL(values[1]); + let descText = values[2]; + + let image1 = document.createElement('img'); + let image2 = document.createElement('img'); + image1.src = objectURL1; + image2.src = objectURL2; + document.body.appendChild(image1); + document.body.appendChild(image2); + + let para = document.createElement('p'); + para.textContent = descText; + document.body.appendChild(para); +} + +displayContent() +.catch((e) => + console.log(e) +); +``` + +Vous verrez que la fonction `fetchAndDecode()` a été convertie facilement en fonction asynchrone avec seulement quelques modifications. Voir la ligne `Promise.all()` : + +```js +let values = await Promise.all([coffee, tea, description]); +``` + +En utilisant `await` ici, nous sommes en mesure d'obtenir tous les résultats des trois promesses retournées dans le tableau `values`, quand ils sont tous disponibles, d'une manière qui ressemble beaucoup à du code synchrone. Nous avons dû envelopper tout le code dans une nouvelle fonction asynchrone, `displayContent()`, et nous n'avons pas réduit le code de beaucoup de lignes, mais être capable de déplacer la majeure partie du code hors du bloc `.then()` fournit une simplification agréable et utile, nous laissant avec un programme beaucoup plus lisible. + +Pour la gestion des erreurs, nous avons inclus un bloc `.catch()` sur notre appel `displayContent()` ; cela permettra de gérer les erreurs survenant dans les deux fonctions. + +> **Note :** Il est également possible d'utiliser un bloc [`finally`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause) au sein d'une fonction asynchrone, à la place d'un bloc asynchrone [`.finally()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally), pour montrer un état final sur le déroulement de l'opération — vous pouvez voir cela en action dans notre [exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html)). + +## Gérer les ralentissements potentiellement causés par async/await + +Il est vraiment utile de connaître `async`/`await`, mais il y a quelques inconvénients à prendre en compte. + +`async`/`await` donne à votre code une apparence synchrone, et d'une certaine manière, il le fait se comporter de manière plus synchrone. Le mot-clé `await` bloque l'exécution de tout le code qui le suit jusqu'à ce que la promesse se réalise, exactement comme dans le cas d'une opération synchrone. Il permet certes aux autres tâches de continuer à s'exécuter entre-temps, mais le code attendu est bloqué. + +```js +async function makeResult(items) { + let newArr = []; + for(let i=0; i < items.length; i++) { + newArr.push('word_'+i); + } + return newArr; +} + +async function getResult() { + let result = await makeResult(items); // Bloqué sur cette ligne + useThatResult(result); // Pas exécuté tant que makeResult() n'a pas fini +} +``` + +Cela signifie que votre code pourrait être ralenti par un nombre important de promesses attendues se produisant directement les unes après les autres. Chaque `await` attendra que la précédente se termine, alors qu'en réalité ce que vous voulez, c'est que les promesses commencent à être traitées simultanément, comme elles le feraient si nous n'utilisions pas `async`/`await`. + +Il existe un modèle qui peut atténuer ce problème - déclencher tous les processus de promesse en stockant les objets `Promise` dans des variables, et en les attendant tous ensuite. Jetons un coup d'œil à quelques exemples qui prouvent le concept. + +Nous disposons de deux exemples - [slow-async-await.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html)) et [fast-async-await.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html)). Les deux commencent par une fonction promise personnalisée qui simule un processus asynchrone avec un appel [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) : + +```js +function timeoutPromise(interval) { + return new Promise((resolve, reject) => { + setTimeout(function(){ + resolve("fait"); + }, interval); + }); +}; +``` + +Ensuite, chacun comprend une fonction asynchrone `timeTest()` qui attend trois appels `timeoutPromise()` : + +```js +async function timeTest() { + ... +} +``` + +Chacune d'entre elles se termine en enregistrant une heure de début, en voyant combien de temps la promesse `timeTest()` met à se réaliser, puis en enregistrant une heure de fin et en indiquant combien de temps l'opération a pris au total : + +```js +let startTime = Date.now(); +timeTest().then(() => { + let finishTime = Date.now(); + let timeTaken = finishTime - startTime; + console.log("Temps pris en millisecondes : " + timeTaken); +}) +``` + +C'est la fonction `timeTest()` qui diffère dans chaque cas. + +Dans l'exemple `slow-async-await.html`, `timeTest()` ressemble à ceci : + +```js +async function timeTest() { + await timeoutPromise(3000); + await timeoutPromise(3000); + await timeoutPromise(3000); +} +``` + +Ici, nous attendons les trois appels `timeoutPromise()` directement, en faisant en sorte que chacun d'eux alerte pendant 3 secondes. Chaque appel suivant est forcé d'attendre jusqu'à ce que le dernier soit terminé - si vous exécutez le premier exemple, vous verrez la boîte d'alerte signaler une durée d'exécution totale d'environ 9 secondes. + +Dans l'exemple `fast-async-await.html`, `timeTest()` ressemble à ceci : + +```js +async function timeTest() { + const timeoutPromise1 = timeoutPromise(3000); + const timeoutPromise2 = timeoutPromise(3000); + const timeoutPromise3 = timeoutPromise(3000); + + await timeoutPromise1; + await timeoutPromise2; + await timeoutPromise3; +} +``` + +Ici, nous stockons les trois objets `Promise` dans des variables, ce qui a pour effet de déclencher leurs processus associés, tous exécutés simultanément. + +Ensuite, nous attendons leurs résultats - parce que les promesses ont toutes commencé à être traitées essentiellement au même moment, les promesses se réaliseront toutes en même temps ; lorsque vous exécuterez le deuxième exemple, vous verrez la boîte d'alerte indiquant un temps d'exécution total d'un peu plus de 3 secondes ! + +### Gestion des erreurs + +La stratégie précédente a un défaut : on pourrait avoir des erreurs qui ne seraient pas gérées. + +Mettons à jour les exemples précédents en ajoutant une promesse rejetée et une instruction `catch` à la fin : + +```js +function timeoutPromiseResolve(interval) { + return new Promise((resolve, reject) => { + setTimeout(function(){ + resolve("Succès"); + }, interval); + }); +}; + +function timeoutPromiseReject(interval) { + return new Promise((resolve, reject) => { + setTimeout(function(){ + reject("Erreur"); + }, interval); + }); +}; + +async function timeTest() { + await timeoutPromiseResolve(5000); + await timeoutPromiseReject(2000); + await timeoutPromiseResolve(3000); +} + +let startTime = Date.now(); +timeTest().then(() => {}) +.catch(e => { + console.log(e); + let finishTime = Date.now(); + let timeTaken = finishTime - startTime; + console.log("Temps écoulé en millisecondes : " + timeTaken); +}) +``` + +Dans l'exemple qui précède, l'erreur est gérée correctement et le message dans la console apparaît après environ 7 secondes. + +Voyons maintenant la deuxième approche : + +```js +function timeoutPromiseResolve(interval) { + return new Promise((resolve, reject) => { + setTimeout(function(){ + resolve("Succès"); + }, interval); + }); +}; + +function timeoutPromiseReject(interval) { + return new Promise((resolve, reject) => { + setTimeout(function(){ + reject("Erreur"); + }, interval); + }); +}; + +async function timeTest() { + const timeoutPromiseResolve1 = timeoutPromiseResolve(5000); + const timeoutPromiseReject2 = timeoutPromiseReject(2000); + const timeoutPromiseResolve3 = timeoutPromiseResolve(3000); + + await timeoutPromiseResolve1; + await timeoutPromiseReject2; + await timeoutPromiseResolve3; +} + +let startTime = Date.now(); +timeTest().then(() => { +}).catch(e => { + console.log(e); + let finishTime = Date.now(); + let timeTaken = finishTime - startTime; + console.log("Temps écoulé en millisecondes : " + timeTaken); +}) +``` + +Dans cet exemple, on a une erreur qui n'est pas gérée dans la console (après 2 secondes) et le message apparaît après environ 5 secondes. + +Pour démarrer les promesses en parallèles et intercepter les erreurs correctement, on pourrait utiliser `Promise.all()` comme vu auparavant : + +```js +function timeoutPromiseResolve(interval) { + return new Promise((resolve, reject) => { + setTimeout(function(){ + resolve("Succès"); + }, interval); + }); +}; + +function timeoutPromiseReject(interval) { + return new Promise((resolve, reject) => { + setTimeout(function(){ + reject("Erreur"); + }, interval); + }); +}; + +async function timeTest() { + const timeoutPromiseResolve1 = timeoutPromiseResolve(5000); + const timeoutPromiseReject2 = timeoutPromiseReject(2000); + const timeoutPromiseResolve3 = timeoutPromiseResolve(3000); + + const results = await Promise.all([timeoutPromiseResolve1, timeoutPromiseReject2, timeoutPromiseResolve3]); + return results; +} + +let startTime = Date.now(); +timeTest().then(() => { +}).catch(e => { + console.log(e); + let finishTime = Date.now(); + let timeTaken = finishTime - startTime; + console.log("Temps écoulé en millisecondes : " + timeTaken); +}) +``` + +Dans cet exemple, l'erreur est gérée correctement après 2 secondes et on a le message dans la console après environ 2 secondes. + +La méthode `Promise.all()` rejète lorsqu'au moins un de ses promesses d'entrée rejète. Si on veut que toutes les promesses soient résolues (correctement ou avec un rejet), on pourra utiliser la méthode [`Promise.allSettled()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) à la place. + +## Méthodes de classe async/await + +Une dernière remarque avant de poursuivre, vous pouvez même ajouter `async` devant les méthodes de classe/objet pour qu'elles renvoient des promesses, et `await` des promesses à l'intérieur de celles-ci. Jetez un œil au [code de la classe ES que nous avons vu dans notre article sur le JavaScript orienté objet](/fr/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes), puis regardez notre version modifiée avec une méthode `async` : + +```js +class Personne { + constructor(prenom, nomFamille, age, genre, interets) { + this.nom = { + prenom, + nomFamille + }; + this.age = age; + this.genre = genre; + this.interets = interets; + } + + async salutation() { + return await Promise.resolve(`Bonjour ! Je suis ${this.nom.prenom}`); + }; + + aurevoir() { + console.log(`${this.nom.prenom} a quitté le bâtiment. À une prochaine fois !`); + }; +} + +let han = new Personne('Han', 'Solo', 25, 'homme', ['Contrebande']); +``` + +La méthode de la première classe peut maintenant être utilisée de la manière suivante : + +```js +han.salutation().then(console.log); +``` + +## Prise en charge des navigateurs + +L'une des considérations à prendre en compte pour décider d'utiliser `async`/`await`est la prise en charge des anciens navigateurs. Ces fonctionnalités sont disponibles dans les versions modernes de la plupart des navigateurs, tout comme les promesses ; les principaux problèmes de prise en charge concernent Internet Explorer et Opera Mini. + +Si vous souhaitez utiliser `async`/`await` mais que vous êtes préoccupé par la prise en charge de navigateurs plus anciens, vous pouvez envisager d'utiliser la bibliothèque [BabelJS](https://babeljs.io/). Cela vous permet d'écrire vos applications en utilisant les dernières versions de JavaScript et de laisser Babel déterminer les modifications éventuellement nécessaires pour les navigateurs de vos utilisateurs. Lorsque vous rencontrez un navigateur qui ne supporte pas async/await, le _polyfill_ « prothèse d'émulation » de Babel peut automatiquement fournir des _fallbacks_ « solutions de secours » qui fonctionnent dans les anciens navigateurs. + +## Conclusion + +Et voilà, `async`/`await` offre un moyen agréable et simplifié d'écrire du code asynchrone, plus facile à lire et à maintenir. Même si la prise en charge par les navigateurs est plus limitée que d'autres mécanismes de code asynchrone à l'heure où nous écrivons ces lignes, cela vaut la peine de l'apprendre et d'envisager de l'utiliser, maintenant et à l'avenir. + +{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}} + +## Dans ce module + +- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts) +- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing) +- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals) +- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises) +- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await) +- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach) |