Comment utiliser la méthode fetch en JavaScript

Utilisation de la méthode fetch en JavaScript

Dans le développement Web moderne, l'interaction des données avec le serveur est une exigence très courante. Pour répondre à ce besoin, JavaScript fournit la méthode fetch, qui est une API puissante et facile à utiliser qui peut nous aider à envoyer et recevoir des requêtes HTTP.

L'utilisation de base de la méthode fetch est la suivante :

fetch(url, options)
  .then(response => response.json())
  .then(data => {
    // 对返回的数据进行处理
  })
  .catch(error => {
    // 处理请求错误
  });

Dans cet exemple, la méthode fetch accepte deux paramètres : url et options. url est l'adresse à laquelle envoyer la demande et les options sont des paramètres facultatifs utilisés pour configurer les détails de la demande, tels que la méthode de demande, les en-têtes de demande, etc.

La méthode fetch renvoie un objet Promise. Nous pouvons gérer les réponses réussies via la méthode .then() et gérer les erreurs via la méthode .catch(). En cas de réponse réussie, nous pouvons utiliser la méthode Response.json() pour analyser les données renvoyées au format JSON et transmettre les données analysées à la méthode .then() suivante.

Voyons un exemple complet d'obtention de données du serveur en utilisant la méthode fetch et en les affichant dans une page Web :

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    const container = document.getElementById('data-container');
    data.forEach(item => {
      const listItem = document.createElement('li');
      listItem.innerText = item.title;
      container.appendChild(listItem);
    });
  })
  .catch(error => {
    console.error('请求错误:', error);
  });

Dans cet exemple, nous envoyons une requête GET à https://api.example.com/data , puis utilisez la méthode Response.json() pour analyser les données de réponse au format JSON. Ensuite, nous parcourons le tableau de données et créons le titre de chaque élément en tant qu'élément li et l'ajoutons au conteneur avec l'identifiant data-container.

En plus des requêtes GET, la méthode fetch prend également en charge d'autres méthodes de requête HTTP, telles que POST, PUT et DELETE. Nous pouvons spécifier la méthode de requête en définissant le champ méthode dans le paramètre options. Par exemple, si vous souhaitez envoyer une requête POST, vous pouvez écrire comme ceci :

const options = {
  method: 'POST',
  body: JSON.stringify({ username: 'admin', password: '123456' }),
  headers: {
    'Content-Type': 'application/json'
  }
};

fetch('https://api.example.com/login', options)
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理请求错误
  });

Dans cet exemple, nous spécifions la méthode de requête comme POST dans le paramètre options et définissons le champ body pour envoyer les données au format JSON. De plus, nous pouvons également spécifier les en-têtes de requête en définissant le champ en-têtes.

Il est à noter que la méthode fetch ne sera rejetée que lorsqu'une erreur se produit dans la requête réseau. En d’autres termes, il ne traite pas automatiquement les codes d’état d’erreur HTTP (tels que 404) comme des erreurs. Si nous devons gérer un code d'état HTTP spécifique, nous pouvons le déterminer dans la réponse réussie.

Pour résumer, la méthode fetch est un moyen très pratique d'envoyer et de recevoir des requêtes HTTP en JavaScript. Il prend en charge diverses méthodes de requête HTTP, peut définir les détails de la requête et utilise également le mécanisme Promise pour rendre le code plus concis et lisible. En maîtrisant l'utilisation de la méthode fetch, nous pouvons interagir avec le serveur de manière plus flexible et ajouter plus de fonctions et d'expériences interactives à l'application Web.

(801 mots au total)

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!