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

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

Présentation

Mis à jour le


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…

~~ Fin de l'extrait ~~

Découverte via les timer JS natif

Mis à jour le

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

Le format JSON

Mis à jour le

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

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

Les API

Mis à jour le

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

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

Exercices Ajax et asynchrone

Mis à jour le

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

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