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 :

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

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));

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));

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

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!