From d596e86a4f13b04981f51d327af257b07e6d21c3 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 14 Nov 2021 14:23:22 +0100 Subject: Prepare Learning Area section for Markdown conversion (#2738) * Remove summary, spans and fonts * Remove notranslate class * Remove ids other than headings * Remove hidden blocks * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * Fix notes * Remove code in pre, sub/sup and some styles * fix dls * fix absolute / english links * fix figures and others * fix other issues from report * Fix other one-off issues excl. imgs * Fix images * Fixes #2842 for Learning area --- .../javascript/asynchronous/introducing/index.html | 33 +++++++++------------- 1 file changed, 13 insertions(+), 20 deletions(-) (limited to 'files/fr/learn/javascript/asynchronous/introducing/index.html') diff --git a/files/fr/learn/javascript/asynchronous/introducing/index.html b/files/fr/learn/javascript/asynchronous/introducing/index.html index b58da5b180..1a352017dd 100644 --- a/files/fr/learn/javascript/asynchronous/introducing/index.html +++ b/files/fr/learn/javascript/asynchronous/introducing/index.html @@ -19,9 +19,9 @@ translation_of: Learn/JavaScript/Asynchronous/Introducing
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}
-

Dans cet article, nous récapitulons brièvement les problèmes associés au JavaScript synchrone, et nous jetons un premier coup d'œil à certaines des différentes techniques asynchrones que vous rencontrerez, en montrant comment elles peuvent nous aider à résoudre ces problèmes.

+

Dans cet article, nous récapitulons brièvement les problèmes associés au JavaScript synchrone, et nous jetons un premier coup d'œil à certaines des différentes techniques asynchrones que vous rencontrerez, en montrant comment elles peuvent nous aider à résoudre ces problèmes.

- +
@@ -68,15 +68,12 @@ btn.addEventListener('click', () => {

Ainsi, dans l'exemple ci-dessus, après avoir cliqué sur le bouton, le paragraphe n'apparaîtra qu'après avoir appuyé sur le bouton OK dans la boîte d'alerte. Vous pouvez l'essayer vous-même :

- +

{{EmbedLiveSample('synchronous_javascript', '100%', '110px')}}

-
-

Note :

-

Il est important de se rappeler que alert(), tout en étant très utile pour démontrer une opération de blocage synchrone, est horrible à utiliser dans des applications du monde réel.

+
+

Note : Il est important de se rappeler que alert(), tout en étant très utile pour démontrer une opération de blocage synchrone, est horrible à utiliser dans des applications du monde réel.

JavaScript asynchrone

@@ -162,9 +159,8 @@ gods.forEach(function (eachName, index){ console.log('Problème de récupération : ' + err.message); }); -
-

Note :

-

Vous pouvez trouver la version finale sur GitHub (voir la source ici, et aussi voir le fonctionnement en direct).

+
+

Note : Vous pouvez trouver la version finale sur GitHub (voir la source ici, et aussi voir le fonctionnement en direct).

Nous voyons ici fetch() prendre un seul paramètre - l'URL d'une ressource que vous souhaitez récupérer sur le réseau - et renvoyer une promesse. La promesse est un objet représentant l'achèvement ou l'échec de l'opération asynchrone. Elle représente un état intermédiaire, en quelque sorte. En substance, c'est la façon dont le navigateur dit « Je promets de vous donner la réponse dès que possible », d'où le nom de « promesse ».

@@ -176,9 +172,8 @@ gods.forEach(function (eachName, index){
  • Le bloc catch() à la fin s'exécute si l'un des blocs .then() échoue - de manière similaire aux blocs synchrones try...catch, un objet d'erreur est mis à disposition à l'intérieur du catch(), qui peut être utilisé pour signaler le type d'erreur qui s'est produit. Notez cependant que le try...catch synchrone ne fonctionnera pas avec les promesses, bien qu'il fonctionne avec async/await, comme vous l'apprendrez plus tard.
    • -
    -

    Note :

    -

    Vous en apprendrez beaucoup plus sur les promesses plus tard dans le module, alors ne vous inquiétez pas si vous ne les comprenez pas encore complètement.

    +
    +

    Note : Vous en apprendrez beaucoup plus sur les promesses plus tard dans le module, alors ne vous inquiétez pas si vous ne les comprenez pas encore complètement.

    La file d'attente des événements

    @@ -255,18 +250,16 @@ console.log(`Tout est bon !`);

    Cela est dû au fait qu'au moment où le navigateur tente d'exécuter la troisième instruction console.log(), le bloc fetch() n'a pas fini de s'exécuter, de sorte que la variable image n'a pas reçu de valeur.

    -
    -

    Note :

    -

    Pour des raisons de sécurité, vous ne pouvez pas fetch() les fichiers de votre système de fichiers local (ou exécuter d'autres opérations de ce type localement) ; pour exécuter l'exemple ci-dessus localement, vous devrez le faire passer par un serveur web local.

    +
    +

    Note : Pour des raisons de sécurité, vous ne pouvez pas fetch() les fichiers de votre système de fichiers local (ou exécuter d'autres opérations de ce type localement) ; pour exécuter l'exemple ci-dessus localement, vous devrez le faire passer par un serveur web local.

    Apprentissage actif : rendez tout asynchrone !

    Pour corriger l'exemple problématique de fetch() et faire en sorte que les trois déclarations console.log() apparaissent dans l'ordre souhaité, vous pourriez faire en sorte que la troisième déclaration console.log() s'exécute également de manière asynchrone. Cela peut être fait en la déplaçant à l'intérieur d'un autre bloc .then() enchaîné à la fin du deuxième, ou en la déplaçant à l'intérieur du deuxième bloc then(). Essayez de corriger cela maintenant.

    -
    -

    Note :

    -

    Si vous êtes bloqué, vous pouvez trouver une réponse ici (voyez-la fonctionner en direct). Vous pouvez également trouver beaucoup plus d'informations sur les promesses dans notre guide Gérer les opérations asynchrones avec élégance grâce aux Promesses, plus loin dans ce module.

    +
    +

    Note : Si vous êtes bloqué, vous pouvez trouver une réponse ici (voyez-la fonctionner en direct). Vous pouvez également trouver beaucoup plus d'informations sur les promesses dans notre guide Gérer les opérations asynchrones avec élégance grâce aux Promesses, plus loin dans ce module.

    Conclusion

    -- cgit v1.2.3-54-g00ecf
    Prérequis :