Votre guide dans les plaines du far-web

Formation développeur web


« Donne un poisson à un homme, tu le nourris pour un jour. Apprends-lui à pêcher, tu le nourris pour toujours. » Lao Tseu

Généralités

Mis à jour le

Bienvenue 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 :

  1. faire des animations
  2. récupérer des données sur un serveur distant


En tant que développeur débutant, vous serez…

~~ Fin de l'extrait ~~

Présentation

Mis à jour le

Le 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 ~~

Timers et animations

Mis à jour le

Pour 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 :

  1. setTimeout() :…
~~ Fin de l'extrait ~~

Requêtes HTTP asynchrones

Mis à jour le

Depuis 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 ~~

API : Application Programing Interface

Mis à jour le

Maintenant 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 ~~

Le format JSON

Mis à jour le

Le 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 ~~

XHR et JQuery

Mis à jour le

Comme 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 ~~

Promesses

Mis à jour le

Les 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 ~~

La méthode fetch

Mis à jour le

La 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 ~~

Callback Hell

Mis à jour le

En 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 ~~

async / await

Mis à jour le

Les 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
//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…
~~ Fin de l'extrait ~~