Les Promises en Javascript
Télécharger en tant que PPTX, PDF0 j'aime2,358 vues
Le document explique le fonctionnement des promesses en JavaScript, introduisant ces concepts dans le contexte d'ECMAScript et de l'évolution du langage depuis sa création. Les promesses sont présentées comme des outils pour gérer l'asynchronisme, avec des états et des méthodes pour faciliter leur utilisation, comme 'then()', 'catch()', 'Promise.all()' et 'Promise.race()'. Des exemples pratiques illustrent l'application des promesses pour le chaînage et les requêtes HTTP.
![4- Méthodes & Patterns
• Une promise est un pattern en elle-même.
• En plus du chaînage, elle a 2 méthodes:
.all([ ... ])
.race([ ... ])](https://image.slidesharecdn.com/promises-150320040410-conversion-gate01/85/Les-Promises-en-Javascript-25-320.jpg)
![4- Méthodes & Patterns
• Prend un tableau de promises en paramètre
• Exécute "then" lorsque tous les résultats sont arrivés
Promise.All([ ... ])](https://image.slidesharecdn.com/promises-150320040410-conversion-gate01/85/Les-Promises-en-Javascript-26-320.jpg)
![4- Méthodes & Patterns
• Prend un tableau de promises en paramètre
• Exécute "then" lorsque le premier résultat est arrivé
Promise.race([ ... ])
then()](https://image.slidesharecdn.com/promises-150320040410-conversion-gate01/85/Les-Promises-en-Javascript-27-320.jpg)
Les Promises en Javascript
- 1. Les Promises en JS Benoit Zohar
- 3. 1- Javascript et ECMAScript • Javascript est un language de scripting • Créé en 1995 par Brendan Eich pour Netscape
- 4. 1- Javascript et ECMAScript • Netscape dépose une standardisation: ECMAScript • Javascript évolue rapidement. • Les moteurs Javascript aussi.
- 5. 1- Javascript et ECMAScript • Javascript est utilisé dans le navigateur • Mais aussi : • Serveurs web • Applications mobiles (Semi-Natives / HTML5) • Macros (Open Office)
- 6. 1- Javascript et ECMAScript • ECMAScript sert de standard pour • JS • ActionScript • C++
- 7. 1- Javascript et ECMAScript • Le Futur: ECMAScript 6 • ECMAScript 6 apporte beaucoup d'améliorations: • les Classes (!) • la Déstructuration • les Générateurs • les Promises
- 9. 2- Threads et callbacks • Javascript est single-threaded. • Toute action est bloquante. • Les traitements longs sont détachés pour libérer le thread principal.
- 10. 2- Threads et callbacks • Un Callback peut être comparé à un Event unique. • Fonction en paramètre d'un appel méthode • Exécutée à la fin du traitement
- 11. 2- Threads et callbacks
- 12. 2- Threads et callbacks • Dans la vraie vie:
- 14. 3 Promises
- 15. 3- Promises • Issues du DOM: • Objectif: Simplifier la démarche asynchrone • "Promesse de réponse" • 2 types de réponses: • Succès (valeur) • Erreur (message) Futures
- 16. 3- Promises • Déjà implémentés: • AngularJS: $q (Q) • jQuery (~) • RSVP • when • ...
- 17. 3- Promises • Quatre états: • accomplie (fulfilled) • rejetée (rejected) • en attente (pending) • établie (settled)
- 18. 3- Promises Utilisation d'un objet Promise • initialisation: new Promise(function) • then() <- Action à lier au retour d'une promise • catch() <- Capturer les erreurs • resolve() <- Tout à bien fonctionné • reject() <- Une erreur est survenue
- 19. 3- Promises Utilisation d'un objet Promise
- 20. 3- Promises Utilisation d'un objet Promise
- 21. 3- Promises Utilisation d'un objet Promise
- 22. 3- Promises • then() et catch() retournent une promise • reject() et resolve() aussi Chaînage
- 23. 3- Promises • Dans la vraie vie:
- 25. 4- Méthodes & Patterns • Une promise est un pattern en elle-même. • En plus du chaînage, elle a 2 méthodes: .all([ ... ]) .race([ ... ])
- 26. 4- Méthodes & Patterns • Prend un tableau de promises en paramètre • Exécute "then" lorsque tous les résultats sont arrivés Promise.All([ ... ])
- 27. 4- Méthodes & Patterns • Prend un tableau de promises en paramètre • Exécute "then" lorsque le premier résultat est arrivé Promise.race([ ... ]) then()
- 28. 5 Exemples
- 29. 5- Exemples • Exemple 1: Chaînage • Exemple 2: Requête HTTP • Exemple 3: Race
Notes de l'éditeur
- #4: Brendan Eich: membre du conseil d’administration de la Mozilla Foundation SUN + Netscape : sortie de JS en décembre 1995 Mocha -> LiveScript -> Javascript
- #5: Actuel ECMAScript: principalement la v3. la v4 a été abandonnées au profit de la 5 la 5 vise a améliorer la rétrocompatibilité avec les versions précédentes Javascript Engines: V8 = google / nodeJS Chakra = IE SpiderMonkey = Firefox JavaScriptCore = Webkit (Safari..)
- #6: NodeJS basé sur CommonJS CommonJS : projet de développement d'une API pour développer un écosystème en JS.
- #7: ActionScript -> Flash C++ -> Norme 2011 aussi : Adobe Acrobat, .NET (JSCript)
- #8: Destructuring object ~= list() en PHP générateur = generator (yield ...) Aussi: Valeurs par défaut, allègement de syntax (fonctions), portée des variables (let), collections, proxies
- #10: Par convention et à l'usage, les traitements longs sont détachés pour débloquer le thread principal.
- #11: Un callback peut être comparé à un évènement unique ET spécifique. C'est à dire qu'il est attaché à une seule méthode (en théorie) et n'est appelé qu'une fois (en théorie aussi) Concretement, le JS est devenu un nid à Callback (surtout avec NodeJS).
- #12: Voici un exemple très simple de callback.
- #13: Flèches vertes = succès Flèches rouges = erreur
- #17: Nous nous intéresserons à l'implémentation officielle, celle qui vient avec ECMAScript 6: l'objet "Promise"
- #18: accomplie: L’action associée à la promesse a réussi rejetée: L’action associée à la promesse a échoué en attente: N’est encore ni accomplie ni rejetée établie: Est accomplie ou rejetée
- #20: Expliquer pour "resolve" et "rejecte" en parametre
- #21: Expliquer pour "resolve" et "rejecte" en parametre -> Mais il y a aussi une autre manière de capturer les erreurs ... ->
- #23: "on peut donc écrire"
- #24: Reprenons l'exemple de tout à l'heure
- #27: renvoie un tableau avec tous les résultats
- #28: Les autres résultats sont abandonnés...