JavaScript Promise : then() - async/await - fetch() en français 

@aminegh8725 Merci !Je suis content que cette vidéo, enregistrée il y a un petit bout de temps maintenant, soit encore utile 👍

Merci Emmanuel :) Parfois la subjectivité ça a du bon :p

Merci Nicolas :)

Merci Senga :) Content que cette vidéo soit utile. C'est tellement important les Promises quand on est développeur Front que le sujet valait bien une vidéo dédiée ;)

Merci Julien :) Je reçois régulièrement des témoignage d'apprentis devs en formation chez des gros, qui trouvent sur Code Concept ce qu'ils trouvent pas sur des grosses structures. Je fais finir par créer un open-codeconcept ou un oclockconcept pour redonner la foi aux devs dans la tourmente :D C'est normal de passer par des hauts et des bas pendant une reconversion. J'ai tendance à dire que la reconversion est un sport de combat. Il faut garder l'objectif final en tête quand on est dans le dur et se dire qu'en persévérant et pratiquant, un beau jour, le blocage sur un point précis tombe. Ca doit "juste" être le temps et la répétition nécessaires pour que les connexions neuronales se fassent. C'est la fameuse plasticité du cerveau. Elle n'est hélas pas instantanées comme c'était le cas pour Bradley Cooper dans 'Limitless', quand il prenait sa pilule qui lui permettait de tout comprendre instantanément. Au naturel, il faut qu'on répète jusqu'à l'illumination. J'ai vécu ça avec le passage à la programmation objet, puis la programmation fonctionnelle ;)

@@codeconcept oui surtout que j'ai 38 et mon début de vue à été très très festif jusqu'à à aller au fond, je remonte la pente depuis plusieurs années et le dernier pallier c'est arrivé à faire le job que je voulais faire à la base (dev si c'est pas clair 😂) mais dison que suivre une formation dans mon cas c'est devoir vivre avec le rsa, et franchement ça aide pas à libérer l'esprit, mais je me dis qu'au moins j'aurai acquis des bases et repris l'habitude de bosser seul, et depuis peu je me sert de chat gpt comme d'un mentor et c'est pas si mal. En tout cas merci 🙏

Je connais hélas bien le temps passé à faire du calcul mental, les nuits d'insomnie particulièrement, à se demander comment faire avec du reste à vivre ... négatif. C'est pour ça qu'entendre un ministre nous expliquer qu'à 10000 € / mois (7500 après impôts), il avait du mal à acheter des pâtes à ses enfants, m'a fait, comment dirais-je, tomber de ma chaise. Mais c'était peut-être des pâtes aux truffes. 38 ans c'est encore jeune. Les recruteurs voudraient qu'on reste magiquement bloqués à 35 ans. Car avant, on peut avoir des enfants, après des ennuis de santé. Mais bon, au bout d'un moment, il faut bien mettre quelqu'un entre la chaise et le clavier pour développer ou maintenir des apps qui rapportent. Donc tu ne seras pas leur premier choix - comme tant d'autres parmi nous -, mais ça finira par le faire. Ils ne nous aiment pas et la réciproque est valable. Des sentiments partagés pour une fois : c'est pas beau ça ? Comme quoi, l'harmonie est possible :D

Merci Olivier ! J'ai effectivement beaucoup réfléchi à la façon d'aborder ce gros sujet qu'est l'asynchronie dans le dev contemporain. Content que tu aies apprécié le résultat :)

Merci 😀

Merci Andy :) Même si le boss c'est Bruce :p

Super sympa Karen : merci pour ce commentaire qui fait chaud au coeur :) Si c'est pas indiscret, tu fais quelle formation ?

@@codeconcept formation école O'clock 😉

Bon courage pour la reconversion : c'est un parcours du combattant qui en vaut la peine. Il ne faut pas se laisser décourager pour le progrès des IA. Les devs sont les mieux placés pour surfer cette vague ;)

Merci Thibault :D

Merci b-api ... be happy ? :)

Merci Emilie :) Les promises sont tellement importantes depuis quelques années que c'est une bonne idée de leur consacrer un peu de temps. Elles nous le rendent bien par la suite. Il y aura une vidéo complémentaire qui permettra d'avoir une vue d'ensemble sur les interactions entre call stack, event loop, event queue etc car c'est souvent tout ce contexte qui permet de comprendre l'ordre d'exécution du code asynchrone et synchrone, tant côté client que serveur (en Node par exemple). Ca m'avait en tous cas beaucoup aidé de décoller le nez des seules promesses pour comprendre à quel moment elles sont exécutées. Bonne semaine et bon code également :)

En effet :D Je me suis retrouvé seul à aider un pote pour son déménagement alors qu'il avait toujours plein du monde fourré chez lui quand il s'agissait de vider des bouteilles. Et deux pour un déménagement, c'est vraiment le minimum du minimum.

Merci Melvin ;)

Merci Bot :p

:D C'est vrai que pour les anglophones cool c'est frais. A une époque, il fallait que ce soit "hot". Comme quoi, tout est histoire de température :p

Merci Jean-Bernard :) async/await n'est QUE du sucre syntaxique. Il n''est pas plus bloquant que then(). En effet, en plaçant des console.log() à divers endroits comme je fais dans la vidéo, cela lève les doute. Par exemple async function getUserData(){ const response1 = await fetch('jsonplaceholder.typicode.com/users'); const users1 = await response1.json(); console.log("users1 first user email", users1[0].email); const response2 = await fetch('jsonplaceholder.typicode.com/users'); const users2 = await response2.json(); console.log("users2 first user email", users2[0].email); const response3 = await fetch('jsonplaceholder.typicode.com/users'); const users3 = await response3.json(); console.log("users3 first user email", users3[0].email); console.log("After all promise is executed"); } getUserData(); console.log("Hello World"); On voit bien que "Hello World" final est affiché en premier, malgré le fait que getUserData() est avant et est une fonction async et qu'elle contient des await fetch(). Le résultat dans la console est en effet : "Hello World" "users1 first user email" "Sincere@april.biz" "users2 first user email" "Sincere@april.biz" "users3 first user email" "Sincere@april.biz" "After all promise is executed" J'ai tiré cet exemple de cet article dont j'ai un peu modifié le corps de getUserData() medium.com/geekculture/does-async-await-block-javascript-main-thread-c07db9c48c3e#:~:text=Though%20it%20creates%20a%20confusion,syntactic%20sugars%20for%20promise%20chaining. Ce qu'il manque pour comprendre pourquoi des choses sont bloquantes et pourquoi d'autre ne le sont pas, c'est une vue d'ensemble qui englobe les interactions entre call stack, event loop l'event queue etc. Je ferai une vidéo là dessus ;) Edit : jusqu'à il y a peu, on ne pouvait utiliser await que dans le corps de fonctions async, mais il semble que les 'top level' await soient déjà utilisables dans le contexte de modules JavaScript : developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

Merci Ricky :) En effet, JSON.parse() créé un objet à partir d'une chaine, tandis que JSON.stringify() créé une chaine à partir d'un objet.

c'est la meme , juste que async/await est plus moderne et lisible qu'un enchaînement de then()

C'est en effet plus lisible avec async/await. La raison que je préfère, c'est quand on a besoin de valeurs intermédiaires (rasion 4) de ce blog post : hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9

Ça ressemble à ce que l on trouve dans d autre langage avec les try catch :)

@@GladiusPower En effet :) De Java à C# en passant par PHP, on peut toujours compter sur un bon vieux try/catch ;)

C'est un coup de pouce du destin alors ;) T'utilises quoi par curiosité pour créer ton jeu ? Phaser ?

@@codeconcept purement HTML5, canvas, j'ai créer ma game loop, insérer les sprites,musiques, évent clavier, j'ai pleins d'idées tous les jours et pleins d'erreurs lol et demain je recommence avec webpack.et hier j'ai regardé 3fois ta vidéo pour voir si c'était possible de charger les les objets qui prennent plus de temps avec les promises et j'ai réussi la musique donc cool tes vidéos.

@@olygood Wow, c'est courageux. Cette série d'articles de blog devrait t'intéresser alors spicyyoghurt.com/tutorials/html5-javascript-game-development/develop-a-html5-javascript-game

@@codeconcept merci beaucoup

je lit la doc que tu m'as envoyé c'est vraiment super, merci à toi

Merci :) En effet, avec async.await, on ajoute généralement un try/catch qui engloble le code qui pourrait échouer. Voilà un exemple tiré de MDN : developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/async_function async function getProcessedData(url) { let v; try { v = await downloadData(url); } catch(e) { v = await downloadFallbackData(url); } return processDataInWorker(v); } Quant aux critères de recrutement, je ne dis pas un dixième de ce que je pense tant les bras m'en tombent quand j'entends, encore de nos jours, certaines présentations marketing/corporate/RH qui vendent du rêve au candidat qui, avec un peu d'expérience, sait qu'il est une "resource" sur un fichier excel ... :p

Merci, j'avais déjà du mal à me concentrer mais la 😀

Merci Ling 😀 Sur des tutos longs non-sponsorisés, la pub est nécessaire. Mais tu peux utiliser adblock si elle est trop envahissante 😉

J'essaierais car là c'était trop ^^@@codeconcept

Alternativement, sur le Teachable de Code Concept, il y a des milliers de vidéos (réunies dans une quarantaine de formation) et zéro pub ... mais c'est payant. codeconcept.teachable.com/ 😁 C'est le fameux "si c'est gratuit, c'est toi le produit" du marketing contemporain.