Généralités
Mis à jour leBienvenue dans le cours sur la programmation asynchrone en JavaScript. Ce concept est extrêmement utilisé aujourd'hui, il va donc falloir bien le maitriser.
La programmation asynchrone sert principalement à deux choses en Javascript :
- faire des animations
- récupérer des données sur un serveur distant
En tant que développeur débutant, vous serez…
Vous devez être inscris pour voir le contenu complet de cette section (194 mots supplémentaires ).
Présentation
Mis à jour leLe concept de programmation asynchrone permet de différer l'exécution d'une fonction. Ce qui sous entend une notion temporelle, c'est pour cela que l'on…
~~ Fin de l'extrait ~~Vous devez être inscris pour voir le contenu complet de cette section (604 mots supplémentaires ).
Timers et animations
Mis à jour lePour commencer à découvrir la programmation asynchrone, utilisons des fonctions simples de JS : les timers. Comme leurs noms l'indiquent, les timers vont vous permettre de différer l'exécution d'un code ou d'une fonction.
Voici les deux timers JS :
- setTimeout() :…
Vous devez être inscris pour voir le contenu complet de cette section (754 mots supplémentaires + 8 exercices ).
Requêtes HTTP asynchrones
Mis à jour leDepuis une dizaine d'années, JavaScript permet de faire ce que nous appelons des appels AJAX (pour Asynchronous JAvascript + Xml). Voici pourquoi l'on recourt à cette technique.
Quand un utilisateur charge une page web, le serveur lui renvoi une réponse. On parle alors de requête HTTP et…
~~ Fin de l'extrait ~~Vous devez être inscris pour voir le contenu complet de cette section (469 mots supplémentaires ).
API : Application Programing Interface
Mis à jour leMaintenant que nous avons découvert le principe d'une requête asynchrone, parlons un peu d'une de sa principale utilité en développement JS front-end. Comme nous l'avons vu, les requêtes AJAX permettent d'aller récupérer des informations sur notre serveur a posteriori. Cela peut être…
~~ Fin de l'extrait ~~Vous devez être inscris pour voir le contenu complet de cette section (1499 mots supplémentaires ).
Le format JSON
Mis à jour leLe format JSON, pour JavaScript Object Notation, est un format de fichier permettant de représenter de l'information sous forme de texte structuré. Un fichier JSON est une chaîne de caractère plus ou moins longue selon la quantité de données qu'elle représente. En revanche, ça n'est…
~~ Fin de l'extrait ~~Vous devez être inscris pour voir le contenu complet de cette section (1126 mots supplémentaires + 2 exercices ).
XHR et JQuery
Mis à jour leComme nous l'avons vu dans la présentation, un des principaux problème de l'architecture client/serveur du web est que lorsque nous avons chargé une page web, celle ci est statique, et nous ne pouvons pas récupérer d'autres données provenant du serveur à moins de faire une nouvelle requête HTTP (donc :…
~~ Fin de l'extrait ~~Vous devez être inscris pour voir le contenu complet de cette section (1125 mots supplémentaires ).
Promesses
Mis à jour leLes promesses sont un nouvel objet introduit dans ES6. Elles permettent de faire de l'asynchrone de manière plus propre et de se rapprocher de l'écriture de code synchrone. On les déclare de la même manière qu'un nouvel objet, en utilisant la classe Promise. En revanche, comme nous sommes en asynchrone,…
~~ Fin de l'extrait ~~Vous devez être inscris pour voir le contenu complet de cette section (612 mots supplémentaires ).
La méthode fetch
Mis à jour leLa méthode fetch() disponible en Javascript permet de faire des requêtes sur des des ressources de manière plus optimisée que l'objet XHR. La méthode fetch() se base sur le nouvel objet Promise (promesse), introduit en JS depuis l'ES6. La grande différence avec l'objet XHR, c'est que vous allez pouvoir "chaîner"…
~~ Fin de l'extrait ~~Vous devez être inscris pour voir le contenu complet de cette section (551 mots supplémentaires + 2 exercices ).
Callback Hell
Mis à jour leEn revanche, la syntaxe qui permet d'écrire du code asynchrone n'est pas toujours adaptée, et dans certains cas, un programme asynchrone peut vite devenir illisible car trop enchevêtré. De nouvelles syntaxes, et de nouveaux mot clés ont fait leur apparitions en Javascript pour permettre une écriture du code plus "propre",…
~~ Fin de l'extrait ~~Vous devez être inscris pour voir le contenu complet de cette section (71 mots supplémentaires ).
async / await
Mis à jour leLes async/await sont une nouvelles syntaxes permettant d'écrire du code asynchrone de la même manière que du code synchrone (c'est à dire, sans callback dans des callback, dans des callback...).
Extrait de code :
//ASYNC / AWAIT~~ Fin de l'extrait ~~
//Fonction SANS async
function request_normale() {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(json => console.log(json))
}
//Fonction AVEC async
async…
Vous devez être inscris pour voir le contenu complet de cette section (51 mots supplémentaires + 2 exercices ).