Les Promises en
JS
Benoit Zohar
1
Javascript et
ECMAScript
1- Javascript et ECMAScript
• Javascript est un language de scripting
• Créé en 1995 par Brendan Eich pour Netscape
1- Javascript et ECMAScript
• Netscape dépose une standardisation:
ECMAScript
• Javascript évolue rapidement.
• Les moteur...
1- Javascript et ECMAScript
• Javascript est utilisé dans le navigateur
• Mais aussi :
• Serveurs web
• Applications mobil...
1- Javascript et ECMAScript
• ECMAScript sert de standard pour
• JS
• ActionScript
• C++
1- Javascript et ECMAScript
• Le Futur: ECMAScript 6
• ECMAScript 6 apporte beaucoup d'améliorations:
• les Classes (!)
• ...
2
Threads et
callbacks
2- Threads et callbacks
• Javascript est single-threaded.
• Toute action est bloquante.
• Les traitements longs sont détac...
2- Threads et callbacks
• Un Callback peut être comparé à un Event unique.
• Fonction en paramètre d'un appel méthode
• Ex...
2- Threads et callbacks
2- Threads et callbacks
• Dans la vraie vie:
3
Promises
3- Promises
• Issues du DOM:
• Objectif: Simplifier la démarche asynchrone
• "Promesse de réponse"
• 2 types de réponses:
...
3- Promises
• Déjà implémentés:
• AngularJS: $q (Q)
• jQuery (~)
• RSVP
• when
• ...
3- Promises
• Quatre états:
• accomplie (fulfilled)
• rejetée (rejected)
• en attente (pending)
• établie (settled)
3- Promises Utilisation d'un objet Promise
• initialisation: new Promise(function)
• then() <- Action à lier au retour d'u...
3- Promises Utilisation d'un objet Promise
3- Promises Utilisation d'un objet Promise
3- Promises Utilisation d'un objet Promise
3- Promises
• then() et catch() retournent une promise
• reject() et resolve() aussi
Chaînage
3- Promises
• Dans la vraie vie:
4
Méthodes &
Patterns
4- Méthodes & Patterns
• Une promise est un pattern en elle-même.
• En plus du chaînage, elle a 2 méthodes:
.all([ ... ])
...
4- Méthodes & Patterns
• Prend un tableau de promises en paramètre
• Exécute "then" lorsque tous les résultats sont arrivé...
4- Méthodes & Patterns
• Prend un tableau de promises en paramètre
• Exécute "then" lorsque le premier résultat est arrivé...
5
Exemples
5- Exemples
• Exemple 1: Chaînage
• Exemple 2: Requête HTTP
• Exemple 3: Race
Merci
@benoitzohar
Les Promises en Javascript
Prochain SlideShare
Chargement dans…5
×

Les Promises en Javascript

1 026 vues

Publié le

Introduction à Javascript
Introduction au concept de promesses.
Exemple par l'application avec JS.

Publié dans : Internet
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 026
Sur SlideShare
0
Issues des intégrations
0
Intégrations
222
Actions
Partages
0
Téléchargements
19
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Brendan Eich: membre du conseil d’administration de la Mozilla Foundation
    SUN + Netscape : sortie de JS en décembre 1995

    Mocha -> LiveScript -> Javascript
  • 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..)
  • NodeJS basé sur CommonJS
    CommonJS : projet de développement d'une API pour développer un écosystème en JS.
  • ActionScript -> Flash
    C++ -> Norme 2011

    aussi : Adobe Acrobat, .NET (JSCript)
  • 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
  • Par convention et à l'usage, les traitements longs sont détachés pour débloquer le thread principal.
  • 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).
  • Voici un exemple très simple de callback.
  • Flèches vertes = succès
    Flèches rouges = erreur
  • Nous nous intéresserons à l'implémentation officielle, celle qui vient avec ECMAScript 6: l'objet "Promise"
  • 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
  • Expliquer pour "resolve" et "rejecte" en parametre
  • Expliquer pour "resolve" et "rejecte" en parametre

    -> Mais il y a aussi une autre manière de capturer les erreurs ... ->
  • "on peut donc écrire"
  • Reprenons l'exemple de tout à l'heure
  • renvoie un tableau avec tous les résultats
  • Les autres résultats sont abandonnés...
  • Les Promises en Javascript

    1. 1. Les Promises en JS Benoit Zohar
    2. 2. 1 Javascript et ECMAScript
    3. 3. 1- Javascript et ECMAScript • Javascript est un language de scripting • Créé en 1995 par Brendan Eich pour Netscape
    4. 4. 1- Javascript et ECMAScript • Netscape dépose une standardisation: ECMAScript • Javascript évolue rapidement. • Les moteurs Javascript aussi.
    5. 5. 1- Javascript et ECMAScript • Javascript est utilisé dans le navigateur • Mais aussi : • Serveurs web • Applications mobiles (Semi-Natives / HTML5) • Macros (Open Office)
    6. 6. 1- Javascript et ECMAScript • ECMAScript sert de standard pour • JS • ActionScript • C++
    7. 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
    8. 8. 2 Threads et callbacks
    9. 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. 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. 11. 2- Threads et callbacks
    12. 12. 2- Threads et callbacks • Dans la vraie vie:
    13. 13. 3 Promises
    14. 14. 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
    15. 15. 3- Promises • Déjà implémentés: • AngularJS: $q (Q) • jQuery (~) • RSVP • when • ...
    16. 16. 3- Promises • Quatre états: • accomplie (fulfilled) • rejetée (rejected) • en attente (pending) • établie (settled)
    17. 17. 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
    18. 18. 3- Promises Utilisation d'un objet Promise
    19. 19. 3- Promises Utilisation d'un objet Promise
    20. 20. 3- Promises Utilisation d'un objet Promise
    21. 21. 3- Promises • then() et catch() retournent une promise • reject() et resolve() aussi Chaînage
    22. 22. 3- Promises • Dans la vraie vie:
    23. 23. 4 Méthodes & Patterns
    24. 24. 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([ ... ])
    25. 25. 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([ ... ])
    26. 26. 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()
    27. 27. 5 Exemples
    28. 28. 5- Exemples • Exemple 1: Chaînage • Exemple 2: Requête HTTP • Exemple 3: Race
    29. 29. Merci @benoitzohar

    ×