Guide complet de l'API de récupération

Présentation de l'API Fetch

L'API Fetch est une API JavaScript moderne et native qui vous permet d'effectuer des requêtes HTTP de manière simple et flexible. Il offre une alternative plus simple et plus propre aux technologies plus anciennes telles que XMLHttpRequest. Fetch est basé sur des promesses, ce qui signifie qu'il fonctionne bien avec les fonctionnalités JavaScript modernes telles que le chaînage async/await et .then().

L'API Fetch offre un moyen facile à comprendre d'interagir avec les API RESTful, en gérant à la fois les requêtes simples et complexes. Il est largement pris en charge dans les navigateurs modernes et constitue un outil couramment utilisé pour le développement Web.

Principales fonctionnalités de l'API Fetch :

1. Basé sur des promesses : construit sur des promesses, offrant un moyen simple et intuitif de gérer le code asynchrone.
2. Prend en charge toutes les méthodes HTTP : GET, POST, PUT, DELETE, PATCH, etc.
3. Pas d'enfer de rappel : Grâce à Promises, cela évite les rappels imbriqués.
4. Prise en charge des flux : Fetch prend en charge les flux, ce qui le rend adapté à la gestion efficace de grandes quantités de données.
5. Gestion des erreurs améliorée : contrairement à XMLHttpRequest, l'API Fetch ne rejettera pas un statut d'erreur HTTP (par exemple, 404 ou 500). Vous devez les gérer manuellement.

Installation

L'API Fetch est intégrée aux navigateurs Web modernes, ce qui signifie que vous n'avez rien à installer si vous travaillez dans un environnement de navigateur. Il est disponible nativement et prêt à être utilisé pour effectuer des requêtes HTTP.

Cependant, si vous travaillez dans un environnement Node.js (où la récupération n'est pas prise en charge nativement), vous pouvez installer un polyfill tel que node-fetch.

1. Utilisation de npm (pour l'environnement Node.js) :

Si vous travaillez dans un environnement Node.js et devez utiliser Fetch, vous pouvez installer node-fetch :

npm install node-fetch

Ensuite, importez-le dans votre projet :

const fetch = require('node-fetch');

Utilisation de l'API Fetch

L'API Fetch fournit une fonction globale fetch() que vous pouvez utiliser pour effectuer des requêtes HTTP. Cette fonction renvoie une promesse qui se résout en l'objet Response représentant la réponse à la requête.

Syntaxe

fetch(url, [options])

Paramètres

1. url :

   • Type : chaîne
   • Description : L'URL à laquelle la demande est envoyée. Il peut s'agir d'une URL complète ou d'une URL relative basée sur l'URL de base définie dans la requête.

2. options (facultatif) :

   • Type : objet
   • Description : Un objet de configuration optionnel pour modifier la requête. Certaines options courantes incluent :
     • méthode : La méthode HTTP (par exemple, GET, POST, PUT, DELETE).
     • en-têtes : en-têtes personnalisés à inclure dans la demande (par exemple, Content-Type, Authorization).
     • body : le corps de la requête (uniquement pour les méthodes comme POST ou PUT).
     • mode : contrôle les requêtes d'origine croisée. (par exemple, « cors », « sans cors », « même origine »).
     • cache : Spécifie comment la requête interagira avec le cache (par exemple, « no-store », « reload »).
     • informations d'identification : contrôle les cookies et l'authentification (par exemple, « même origine », « inclure »).

Demande de récupération de base (GET)

Une requête GET de base avec l'API Fetch est simple. La fonction fetch() envoie une requête à l'URL fournie et renvoie une promesse qui se résout avec l'objet Response.

Exemple de code :

Voici un exemple de requête GET simple utilisant l'API Fetch :

npm install node-fetch

Explication :

• fetch() lance la requête vers l'URL donnée.
• .then(response => Response.json()) : convertit l'objet Response en un objet JavaScript en analysant les données JSON.
• .catch() : détecte et enregistre toutes les erreurs, telles que les erreurs réseau ou les requêtes ayant échoué.

Faire des requêtes POST avec Fetch

L'API Fetch vous permet également de faire des requêtes POST. Les requêtes POST sont généralement utilisées pour envoyer des données à un serveur, comme soumettre un formulaire ou créer une nouvelle ressource.

Syntaxe de la requête POST :

const fetch = require('node-fetch');

Exemple de code :

Voici un exemple de requête POST qui envoie des données au serveur :

fetch(url, [options])

Explication :

• méthode : 'POST' : Spécifie qu'il s'agit d'une requête POST.
• body : JSON.stringify(postData) : convertit les données en chaîne JSON avant de les envoyer dans le corps de la requête.
• headers : définit l'en-tête Content-Type sur application/json pour indiquer que les données envoyées sont au format JSON.

Gestion des données de réponse

L'objet Response renvoyé par l'API Fetch contient plusieurs propriétés et méthodes pour interagir avec les données de réponse.

Propriétés clés et méthodes de réponse :

1. response.json() : analyse le corps de la réponse au format JSON.
2. response.text() : analyse le corps de la réponse sous forme de chaîne.
3. response.blob() : analyse la réponse comme un gros objet binaire (utile pour gérer des images ou des fichiers).
4. response.ok : un booléen indiquant si le code d'état de la réponse est compris entre 200 et 299 (réussi).
5. response.status : le code d'état HTTP de la réponse (par exemple, 200 pour succès, 404 pour non trouvé).
6. response.headers : Les en-têtes renvoyés par le serveur en réponse à la requête.

Exemple de code :

Voici un exemple de la façon de gérer différents types de données de réponse :

npm install node-fetch

Explication :

• response.ok vérifie si la réponse a réussi (code d'état 200-299). Sinon, une erreur est générée.
• response.json() est appelé pour analyser la réponse en tant qu'objet JavaScript.

Gestion des erreurs lors de la récupération

Contrairement à XMLHttpRequest, l'API Fetch ne rejette pas automatiquement un statut d'erreur HTTP (par exemple, 404 ou 500). Il ne rejette qu’en cas de panne du réseau ou si la demande est bloquée. Pour gérer des erreurs telles que 404 ou 500, vous devrez vérifier la propriété réponse.ok.

Exemple de gestion des erreurs :

Voici un exemple de la manière de gérer efficacement les erreurs dans Fetch :

const fetch = require('node-fetch');

Explication :

• response.ok : ceci vérifie si le code d'état de la réponse est compris entre 200 et 299 (indiquant le succès).
• Si la requête échoue (par exemple, erreur 404 ou 500), elle générera une erreur avec le code d'état correspondant.

Conclusion

L'API Fetch est un outil puissant et moderne pour effectuer des requêtes HTTP en JavaScript. Il offre une manière propre et intuitive de travailler avec les API REST, et son architecture basée sur des promesses facilite la gestion du code asynchrone. Avec sa prise en charge de toutes les méthodes HTTP, la gestion des erreurs et l'analyse des réponses, Fetch est un outil essentiel pour les développeurs Web.

Que vous récupériez des données, soumettiez des formulaires ou gériez l'authentification, l'API Fetch offre flexibilité et contrôle sur vos requêtes HTTP, ce qui en fait un excellent choix pour les applications Web modernes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!