Programmation asynchrone

Généralités

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

Présentation

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…

Timers et animations

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. 

Requêtes HTTP asynchrones

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…

API : Application Programing Interface

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…

Le format JSON

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…

XHR et JQuery

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

Promesses

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,…

La méthode fetch

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"…

Callback Hell

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",…

async / await

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…