• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 05/10/2021

Récupérez des données d'un service web

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Maintenant que nous savons ce qu'est une requête HTTP, il ne nous reste plus qu'à apprendre à en créer une en JavaScript pour récupérer des données, comme la météo. C'est là que l’API Fetch entre en jeu !

Qu'est-ce que Fetch ?

Fetch est un ensemble d'objets et de fonctions mis à disposition par le langage JavaScript, afin d'exécuter des requêtes HTTP de manière asynchrone.

L’API Fetch  va nous permettre d'exécuter des requêtes HTTP sans avoir besoin de recharger la page du navigateur. Cela a plusieurs avantages :

  • Avoir un site plus réactif car on n'a pas besoin de recharger toute la page dès qu'on a besoin de mettre à jour une partie du contenu ;

  • Améliorer l'expérience utilisateur avec du nouveau contenu qui se charge au fur et à mesure qu'on le découvre, par exemple.

Envoyez une première requête

Voyons maintenant comment on peut construire et envoyer une requête HTTP.

Si vous vous souvenez du chapitre précédent, vous devez avoir deviné que nous allons créer une requête HTTP avec la méthode GET, afin de récupérer des données. C'est parti !

fetch("http://url-service-web.com/api/users");

Ce code nous permet d'envoyer une requête HTTP de type GET au service web se trouvant à l'adresse  http://url-service-web.com/api/users .

Récupérez les données au format JSON

Maintenant que nous savons comment construire et envoyer une requête HTTP, il faut récupérer et interpréter son résultat.

Un service web peut choisir le format qu'il veut pour nous renvoyer des données, mais le plus courant et le plus simple est le format JSON.

Qu'est-ce que le format JSON ?

JSON signifie JavaScript Object Notation. Il s'agit d'un format textuel (contrairement à un format binaire plus léger mais impossible à lire à l'œil humain), se rapprochant en termes de syntaxe de celui des objets dans le langage JavaScript.

Ainsi, l'objet JavaScript suivant :

const obj = {
name: "Mon contenu",
id: 1234,
message: "Voici mon contenu",
author: {
name: "John"
},
comments: [
{
id: 45,
message: "Commentaire 1"
},
{
id: 46,
message: "Commentaire 2"
}
]
};

sera retranscrit ainsi en JSON :

{
"name": "Mon contenu",
"id": 1234,
"message": "Voici mon contenu",
"author": {
"name": "John"
},
"comments": [
{
"id": 45,
"message": "Commentaire 1"
},
{
id: 46,
"message": "Commentaire 2"
}
]
}

Vous pouvez voir comme la syntaxe est similaire entre les 2. Alors qu'en JavaScript il n'est pas nécessaire de mettre les propriétés (comme  name ,  id ,  message , etc.), entre guillemets, cela l'est en JSON. En JavaScript, votre objet est assigné à une variable, alors qu'en JSON on ne fait que décrire une structure.

Le gros avantage de ce format lorsqu'il est utilisé avec le langage JavaScript est qu'il n'y a pas besoin de le parser comme on le ferait avec du XML par exemple. En effet, lorsque l'on manipule un format de données comme le XML, (que vous pouvez comparer à du HTML dans sa forme) il est nécessaire de le parser. C'est-à-dire que notre application doit le lire et le comprendre afin d'en faire ce qu'on veut. C'est une opération généralement complexe que l'on laisse à du code externe développé et éprouvé par d'autres personnes, afin de gagner du temps et d'éviter les erreurs. Mais pour le JSON c'est différent, car c'est une syntaxe qui vient des objets en JavaScript. Ainsi, votre navigateur sait directement le lire et le transformer en objets JavaScript. Si l'on reprend l'exemple de JSON précédent, il nous fournira donc un objet JavaScript comme celui du premier échantillon de code ci-dessus.

Le deuxième avantage de ce format est sa légèreté par rapport à un format comme le XML, qui reste bien plus verbeux, c'est-à-dire avec plus de texte. C'est un gros avantage lorsqu'on communique avec un service web, car cela permet d'optimiser les temps de réponse. En effet, un nombre plus faible d'octets a besoin de transiter dans le réseau.

Récupérez le résultat de la requête

Avec tout ce que l'on vient d'apprendre, il n'est plus très difficile d'utiliser le résultat de la requête pour en faire ce que l'on veut. Pour cela Fetch va nous renvoyer une Promise.

Voici comment procéder avec un service qui fait un simple echo :

fetch(“https://mockbin.com/request”)
.then(function(res) {
if (res.ok) {
return res.json();
}
})
.then(function(value) {
console.log(value);
})
.catch(function(err) {
// Une erreur est survenue
});

Vous pouvez voir dans l'exemple ci-dessus que l'URL passée à la fonctionfetch() a changé et correspond à l’URL de notre service web. Le type de requête est GET (ce qui est le cas par défaut avec Fetch) car nous voulons récupérer les données.

Ensuite nous appelons la fonctionthen()pour récupérer le résultat de la requête au format json en ayant vérifié au préalable que la requête s’était bien passée avec res.ok. Ce résultat json étant lui aussi une Promise, nous le retournons et récupérons sa vraie valeur dans la fonction then() suivante.

Voici ce que nous obtenons de l’API à l’heure où j’écris ces lignes :

Un extrait JSON de la réponse à la requête
Extrait JSON

À vous de jouer !

 16189267631776_A-vous-de-jouer%20%282%29.png

Exercez-vous maintenant avec ce que nous venons d'apprendre.

Rendez-vous dans cet éditeur CodePen pour réaliser l'exercice suivant :

Dans cet exercice nous voulons récupérer les salutations et les afficher dès que nous cliquons sur le bouton "Bien le bonjour"

  • Etape 1 : Nous allons commencer par la création d'une fonction  askHello  qui va créer une requête avec fetch de type  GET  vers le service web avec l'URL  https://mockbin.com/request?greetings=salut 

  • Etape 2 : Maintenant, nous voudrions récupérer la réponse du service web et l'afficher dans l'élément ayant pour ID  hello-result  . Modifiez donc notre fonction  askHello  afin de récupérer la réponse du service web dès que tout s'est bien passé. Le service web vous retournera une réponse au format JSON, et vous aurez besoin d'afficher la propriété greetings se trouvant dans l'objet  queryString  .

Voici à quoi ressemble la réponse JSON :

{
"queryString": {
"greetings": "Salut",
...
},
...
}
  •  Etape 3 : Enfin, nous voulons afficher la salutation (et donc appeler notre fonction  askHello) dès que nous cliquons sur le bouton ayant pour ID  ask-hello  .

En résumé

Dans ce chapitre, vous avez appris :

  • Que l’API Fetch permet de faire des requêtes HTTP vers un service web ;

  • Comment l'utiliser pour faire une requête simple à un service web ;

  • Que le format JSON est très utilisé dans la communication avec les API des services web car il est très proche des objets JavaScript ;

  • Comment récupérer les données envoyées par un service web.

Maintenant que nous savons faire une requête de type GET pour récupérer des données du service web, nous allons voir comment faire une requête POST pour envoyer des données au service web. Mais avant ça, voyons comment préparer nos données à être envoyées au service web.

Exemple de certificat de réussite
Exemple de certificat de réussite