Programmation asynchrone

Généralités

Ce cours parle de la programmation asynchrone en général, et de ses nombreuses applications en Javascript.

Présentation

Qu'est ce que la programmation asynchrone ?

(image visible sur la plateforme de formation)Quand vous codez une application, certaines parties de votre code requiert un certains temps d'exécution. La notion de délai suggère qu'on va devoir attendre un certains temps, avant de pouvoir passer à la suite de…

Découverte via les timer JS natif

Pour commencer à découvrir la programmation asynchrone, utilisons des fonctions simple de JS : les timer. Comme leur noms l'indiquent, et comme nous l'avons déjà vu en pratique, les timers vont vous permettre de "différer" l'exécution d'un code. Voici les deux timers JS :

1. setTimeout : permet…

Le format JSON

(image visible sur la plateforme de formation)

Le format JSON, pour JavaScript Object Notation, est un format de fichier permettant de représenter de l'information sous forme de texte structurée. Un fichier JSON est une chaîne de caractère plus ou moins longue selon…

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

Les API

(image visible sur la plateforme de formation)

C'est quoi une API ?

Maintenant que nous avons découvert le principe d'une requête asynchrone, parlons un peu d'une de ses principales utilité en développement JS front-end. Comme nous l'avons vu plus haut dans le cours, les requêtes AJAX permettent d'aller récupérer des informations sur…

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

Exercices Ajax et asynchrone

Pour réaliser les prochains exercices, vous allez devoir modifier le DOM de votre page web en JS. Il y a 1001 manières de faire cela aujourd'hui, donc je vous aiguillerez chacun selon votre niveau et vos compétences déjà acquises.

Voici les principales techniques pour le faire :

1. en vanillaJS : fastidieux, mais…

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

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…