Maîtriser l'API Fetch : simplifier les requêtes HTTP en JavaScript

API de récupération JavaScript

L'API Fetch est une interface moderne basée sur des promesses en JavaScript utilisée pour effectuer des requêtes HTTP. Il simplifie le processus de récupération des ressources d'un serveur, en remplaçant les anciennes méthodes telles que XMLHttpRequest. Fetch fournit une approche plus propre et plus lisible pour gérer les demandes et les réponses du réseau, prenant en charge des fonctionnalités telles que les promesses, le streaming et l'async/await.

---

1. Principales fonctionnalités de l'API Fetch

• Basé sur des promesses : Fournit un moyen plus élégant de gérer les opérations asynchrones.
• Syntaxe simplifiée : Plus lisible que XMLHttpRequest.
• Prend en charge le streaming : Gère efficacement les réponses volumineuses.
• Extensible : S'intègre facilement aux outils et bibliothèques JavaScript modernes.

---

2. Syntaxe de base de Fetch

fetch(url, options)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle errors
  });

---

3. Faire une demande GET

Récupérer les valeurs par défaut avec la méthode GET.

Exemple :

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

---

4. Faire une demande POST

Pour envoyer des données à un serveur, utilisez la méthode POST avec la propriété body dans l'objet options.

Exemple :

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1,
  }),
})
  .then(response => response.json())
  .then(data => console.log("Response:", data))
  .catch(error => console.error("Error:", error));

---

5. Options de récupération courantes

La fonction fetch accepte un objet d'options pour configurer les requêtes :

Option	Description
method	HTTP method (e.g., GET, POST, PUT, DELETE).
headers	Object containing request headers.
body	Data to send with the request (e.g., JSON, form data).
credentials	Controls whether cookies are sent with the request (include, same-origin).

Option

---

Description

ête> méthode Méthode HTTP (par exemple, GET, POST, PUT, DELETE). en-têtes Objet contenant les en-têtes de requête. corps Données à envoyer avec la requête (par exemple, JSON, données de formulaire). identifiants Contrôle si les cookies sont envoyés avec la demande (inclure, même origine).

6. Gestion des réponses

Method	Description
response.text()	Returns response as plain text.
response.json()	Parses the response as JSON.
response.blob()	Returns response as a binary Blob.
response.arrayBuffer()	Provides response as an ArrayBuffer.

L'objet Response d'un appel fetch contient des méthodes pour traiter les données : Méthode Description ête> response.text() Renvoie la réponse sous forme de texte brut. response.json() Analyse la réponse au format JSON. response.blob() Renvoie la réponse sous forme de Blob binaire. response.arrayBuffer() Fournit une réponse sous forme de ArrayBuffer.

Exemple : Récupération de JSON

fetch(url, options)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle errors
  });

---

7. Utiliser Async/Await avec Fetch

Async/await simplifie la gestion des promesses dans Fetch.

Exemple :

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

---

8. Gestion des erreurs dans Fetch

Contrairement à XMLHttpRequest, Fetch ne rejette pas une promesse pour les erreurs HTTP. Vous devez vérifier la propriété ok ou le code d'état de la réponse.

Exemple :

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1,
  }),
})
  .then(response => response.json())
  .then(data => console.log("Response:", data))
  .catch(error => console.error("Error:", error));

---

9. Récupérer avec les délais d'attente

Fetch ne prend pas en charge nativement les délais d'attente des requêtes. Vous pouvez implémenter un délai d'attente en utilisant Promise.race().

Exemple :

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

---

10. Comparaison : API Fetch et XMLHttpRequest

Feature	Fetch API	XMLHttpRequest
Syntax	Promise-based, simpler, cleaner.	Callback-based, verbose.
Error Handling	Requires manual handling of HTTP errors.	Built-in HTTP error handling.
Streaming	Supports streaming responses.	Limited streaming capabilities.
Modern Features	Works with Promises, async/await.	No built-in Promise support.

Fonctionnalité

---

Récupérer l'API

XMLHttpRequest ête> Syntaxe

Basé sur des promesses, plus simple et plus propre. Basé sur les rappels, détaillé.

Gestion des erreurs

Nécessite une gestion manuelle des erreurs HTTP. Gestion intégrée des erreurs HTTP.

Diffusion

Prend en charge les réponses en streaming. Capacités de streaming limitées.

Fonctionnalités modernes

Fonctionne avec les promesses, asynchrone/attente. Pas de prise en charge intégrée de Promise.

---

11. Quand utiliser l'API Fetch

Fetch est idéal pour les projets de développement Web modernes.

Il s'intègre parfaitement avec Promises et async/await.
Utilisez-le lorsque vous avez besoin d'un code plus propre et plus maintenable.

12. Conclusion L'API Fetch simplifie la création de requêtes HTTP en JavaScript, offrant une alternative plus moderne et plus lisible à XMLHttpRequest. Avec son architecture basée sur Promise, il est mieux adapté aux opérations asynchrones, en particulier lorsqu'il est associé à async/await. Comprendre l'API Fetch est essentiel pour créer des applications Web modernes et dynamiques. Bonjour, je m'appelle Abhay Singh Kathayat ! Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales. N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

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!