Tutoriel de l'API JavaScript Fetch avec des exemples de messages et d'en-têtes JS Fetch

Si vous écrivez une application Web, vous devrez probablement travailler avec des données externes. Cela peut être votre propre base de données, des API tierces, etc.

Lorsque AJAX est apparu pour la première fois en 1999, il nous a montré une meilleure façon de créer des applications Web. AJAX a été une étape importante dans le développement Web et est le concept de base de nombreuses technologies modernes comme React.

Avant AJAX, vous deviez rendre à nouveau une page Web entière, même pour des mises à jour mineures. Mais AJAX nous a donné un moyen de récupérer le contenu du backend et de mettre à jour les éléments d'interface utilisateur sélectionnés. Cela a aidé les développeurs à améliorer l'expérience utilisateur et à créer des plates-formes Web plus grandes et complexes.

Cours intensif sur les API REST

Nous sommes maintenant à l'ère des API RESTful. En termes simples, une API REST vous permet de pousser et d'extraire des données d'une banque de données. Il peut s'agir de votre base de données ou d'un serveur tiers comme l'API Twitter.

Il existe différents types d'API REST. Regardons ceux que vous utiliserez dans la plupart des cas.

  • GET  - Obtenez des données de l'API. Par exemple, obtenez un utilisateur Twitter en fonction de son nom d'utilisateur.
  • POST  - Poussez les données vers l'API. Par exemple, créez un nouvel enregistrement d'utilisateur avec le nom, l'âge et l'adresse e-mail.
  • PUT  - Mettre à jour un enregistrement existant avec de nouvelles données. Par exemple, mettez à jour l'adresse e-mail d'un utilisateur.
  • DELETE  - Supprime un enregistrement. Par exemple, supprimez un utilisateur de la base de données.

Il y a trois éléments dans chaque API REST. La demande, la réponse et les en-têtes.

Demande  - Il s'agit des données que vous envoyez à l'API, comme un identifiant de commande pour récupérer les détails de la commande.

Réponse  - Toutes les données que vous récupérez du serveur après une demande réussie / échouée.

En-têtes  - Métadonnées supplémentaires transmises à l'API pour aider le serveur à comprendre quel type de requête il traite, par exemple «type de contenu».

Le véritable avantage de l'utilisation d'une API REST est que vous pouvez créer une seule couche d'API avec laquelle plusieurs applications peuvent travailler.

Si vous avez une base de données que vous souhaitez gérer à l'aide d'une application Web, mobile et de bureau, vous n'avez besoin que d'une seule couche d'API REST.

Maintenant que vous savez comment fonctionnent les API REST, voyons comment nous pouvons les consommer.

XMLHttpRequest

Avant que JSON ne prenne le contrôle du monde, le principal format d'échange de données était XML. XMLHttpRequest () est une fonction JavaScript qui permettait de récupérer des données à partir d'API qui renvoyaient des données XML.

XMLHttpRequest nous a donné la possibilité de récupérer les données XML du backend sans recharger la page entière.

Cette fonction a grandi depuis ses débuts en étant uniquement XML. Maintenant, il prend en charge d'autres formats de données comme JSON et le texte brut.

Écrivons un simple appel XMLHttpRequest à l'API GitHub pour récupérer mon profil.

// function to handle success function success() { var data = JSON.parse(this.responseText); //parse the string to JSON console.log(data); } // function to handle error function error(err) { console.log('Request Failed', err); //error details will be in the "err" object } var xhr = new XMLHttpRequest(); //invoke a new instance of the XMLHttpRequest xhr.onload = success; // call success function if request is successful xhr.onerror = error; // call error function if request failed xhr.open('GET', '//api.github.com/users/manishmshiva'); // open a GET request xhr.send(); // send the request to the server.

Le code ci-dessus enverra une requête GET à //api.github.com/users/manishmshiva pour récupérer mes informations GitHub en JSON. Si la réponse a réussi, il imprimera le JSON suivant sur la console:

Si la demande a échoué, il imprimera ce message d'erreur sur la console:

Récupérer l'API

L'API Fetch est une version plus simple et facile à utiliser de XMLHttpRequest pour consommer des ressources de manière asynchrone. Fetch vous permet de travailler avec les API REST avec des options supplémentaires telles que la mise en cache des données, la lecture des réponses en continu, etc.

La principale différence est que Fetch fonctionne avec des promesses, pas des rappels. Les développeurs JavaScript se sont éloignés des rappels après l'introduction des promesses.

Pour une application complexe, vous pourriez facilement prendre l'habitude d'écrire des rappels menant à l'enfer des rappels.

Avec des promesses, il est facile d'écrire et de gérer les requêtes asynchrones. Si vous êtes nouveau dans les promesses, vous pouvez apprendre comment elles fonctionnent ici.

Voici à quoi ressemblerait la fonction que nous avons écrite précédemment si vous utilisiez fetch () au lieu de XMLHttpRequest:

// GET Request. fetch('//api.github.com/users/manishmshiva') // Handle success .then(response => response.json()) // convert to json .then(json => console.log(json)) //print data to console .catch(err => console.log('Request Failed', err)); // Catch errors

Le premier paramètre de la fonction Fetch doit toujours être l'URL. Fetch prend ensuite un deuxième objet JSON avec des options telles que la méthode, les en-têtes, le corps de la requête, etc.

Il existe une différence importante entre l'objet de réponse dans XMLHttpRequest et Fetch.

XMLHttpRequest renvoie les données en tant que réponse tandis que l'objet de réponse de Fetch contient des informations sur l'objet de réponse lui-même. Cela inclut les en-têtes, le code d'état, etc. Nous appelons la fonction «res.json ()» pour obtenir les données dont nous avons besoin à partir de l'objet de réponse.

Une autre différence importante est que l'API Fetch ne lèvera pas d'erreur si la demande renvoie un code d'état 400 ou 500. Elle sera toujours marquée comme une réponse réussie et transmise à la fonction «alors».

Fetch ne renvoie une erreur que si la requête elle-même est interrompue. Pour gérer 400 et 500 réponses, vous pouvez écrire une logique personnalisée à l'aide de «response.status». La propriété 'status' vous donnera le code d'état de la réponse retournée.

Génial. Maintenant que vous comprenez le fonctionnement de l'API Fetch, examinons quelques autres exemples tels que la transmission de données et l'utilisation d'en-têtes.

Travailler avec les en-têtes

Vous pouvez passer des en-têtes à l'aide de la propriété «headers». Vous pouvez également utiliser le constructeur d'en-têtes pour mieux structurer votre code. Mais passer un objet JSON à la propriété «headers» devrait fonctionner dans la plupart des cas.

fetch('//api.github.com/users/manishmshiva', { method: "GET", headers: {"Content-type": "application/json;charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

Passer des données à une requête POST

Pour une requête POST, vous pouvez utiliser la propriété «body» pour passer une chaîne JSON en entrée. Notez que le corps de la requête doit être une chaîne JSON tandis que les en-têtes doivent être un objet JSON.

// data to be sent to the POST request let _data = { title: "foo", body: "bar", userId:1 } fetch('//jsonplaceholder.typicode.com/posts', { method: "POST", body: JSON.stringify(_data), headers: {"Content-type": "application/json; charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

The Fetch API is still in active development. We can expect better features in the near future.

However, most browsers support the use of Fetch in your applications. The chart below should help you figure out which browsers support it on the web and mobile apps.

I hope this article helped you understand how to work with the Fetch API. Be sure to try out Fetch for your next web application.

I regularly write about Machine Learning, Cyber Security, and DevOps. You can signup for my weekly newsletter here.