Guide de l’API Fetch JavaScript : GET, POST, gestion des erreurs et exemples concrets

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction

JavaScript est l’un des langages de programmation les plus largement utilisés dans le développement web. Parmi ses nombreuses fonctionnalités, l’API Fetch a attiré l’attention comme une capacité importante pour permettre la communication asynchrone.

Dans cet article, nous expliquons en détail l’API Fetch – des bases aux usages plus avancés. En la comprenant, vous pourrez implémenter la récupération de données et la communication serveur de manière plus fluide dans vos applications web.

Qu’est‑ce que la communication asynchrone ?

La communication asynchrone est une méthode d’échange de données avec un serveur tout en poursuivant d’autres traitements, sans bloquer l’exécution jusqu’à la fin de la communication. Cela améliore la réactivité de l’interface utilisateur et facilite la gestion des données sans frustration.

Par exemple, lorsqu’un utilisateur clique sur un bouton d’une page web pour récupérer des données, les autres tâches peuvent continuer sans attendre la réponse du serveur, ce qui améliore grandement l’expérience utilisateur.

Qu’est‑ce que l’API Fetch ?

L’API Fetch est une interface moderne pour réaliser des communications asynchrones en JavaScript. Elle a été introduite comme alternative au XMLHttpRequest (XHR) traditionnel, offrant une syntaxe concise et une configuration flexible.

Avec cette API, vous pouvez facilement écrire la logique permettant de récupérer des données depuis un serveur ou d’envoyer des données à un serveur.

Dans les sections suivantes, nous présenterons tout pas à pas – de l’utilisation de base de l’API Fetch aux exemples pratiques tirés du monde réel.

2. Qu’est‑ce que l’API Fetch ?

L’API Fetch est la dernière interface standard pour réaliser des communications asynchrones en JavaScript. Dans cette section, nous expliquons son rôle de base et comment elle diffère des approches traditionnelles.

Vue d’ensemble de l’API Fetch

L’API Fetch est conçue pour récupérer des ressources sur un réseau.
Cela facilite la communication des applications web avec les serveurs.

Fonctionnalités clés

• Basée sur les Promises : plus besoin de fonctions de rappel, ce qui permet d’écrire un code plus lisible.
• Syntaxe concise : comparée à XMLHttpRequest, elle peut réduire considérablement la quantité de code.
• Grande flexibilité : vous pouvez personnaliser les requêtes et les réponses en détail.
• Conception moderne : fonctionne bien avec les fonctionnalités modernes de JavaScript, favorisant un code maintenable.

Voici un exemple de base d’utilisation de l’API Fetch.

fetch('https://api.example.com/data')
  .then(response => response.json()) // Convert to JSON
  .then(data => console.log(data))  // Output the data
  .catch(error => console.error('Error:', error)); // Error handling

Ce code récupère des données depuis l’URL spécifiée, les convertit en JSON et les affiche dans la console. En cas d’erreur, il affiche un message d’erreur.

Différences avec le XMLHttpRequest traditionnel

L’API Fetch est une nouvelle approche qui remplace le largement utilisé XMLHttpRequest (XHR). Le tableau ci‑dessous compare les deux.

Comme vous pouvez le constater, l’API Fetch séduit par sa conception concise et moderne. En particulier, le fait d’être basée sur les Promises vous permet d’écrire une logique asynchrone de façon plus naturelle.

Résumé

L’API Fetch est un outil puissant et facile à utiliser pour la communication asynchrone en JavaScript. Parce qu’elle est plus simple à mettre en œuvre que le XHR traditionnel, elle est devenue une compétence indispensable pour le développement web moderne.

Dans la section suivante, nous parcourrons des modèles d’utilisation concrets de l’API Fetch avec des exemples de code.

3. Utilisation de base de l’API Fetch

Dans cette section, nous expliquons l’utilisation de base de l’API Fetch à l’aide d’exemples de code concrets. Nous couvrons principalement les points suivants.

• Syntaxe de la méthode fetch() et exemple de base
• Comment implémenter une requête GET
• Comment gérer les données de réponse

Syntaxe de base de la méthode fetch()

Avec l’API Fetch, vous envoyez des requêtes à un serveur en utilisant la méthode fetch(). Voici la syntaxe de base.

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

Arguments

• url : L’URL à laquelle la requête est envoyée.
• options (optionnel) : Paramètres d’options qui incluent la méthode, les en‑têtes, le corps, et plus encore.

Valeur de retour

• Objet Promise : Retourne le résultat du processus asynchrone.

Comment implémenter une requête GET

L’utilisation la plus basique de l’API Fetch est une requête GET, qui récupère des données depuis un serveur.

Exemple : Récupérer des données JSON

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network error');
    }
    return response.json(); // Retrieve data as JSON
  })
  .then(data => {
    console.log(data); // Display the retrieved data
  })
  .catch(error => {
    console.error('Error:', error); // Print an error log
  });

Comment traiter les données de réponse

Avec l’API Fetch, vous pouvez traiter les données de réponse sous différents formats. Voici des exemples courants.

1. Récupérer des données texte

   fetch('https://example.com/data.txt')
     .then(response => response.text()) // Retrieve data as text
     .then(data => console.log(data))
     .catch(error => console.error('Error:', error));
   

2. Récupérer des données binaires

   fetch('https://example.com/image.jpg')
     .then(response => response.blob()) // Retrieve as binary data
     .then(blob => {
       const imgURL = URL.createObjectURL(blob);
       document.querySelector('img').src = imgURL;
     })
     .catch(error => console.error('Error:', error));
   

3. Récupérer les informations d’en‑tête

   fetch('https://example.com/api')
     .then(response => {
       console.log(response.headers.get('Content-Type')); // Get a header value
     })
     .catch(error => console.error('Error:', error));
   

Résumé

Ici, nous avons couvert une requête GET basique utilisant l’API Fetch et comment gérer les réponses.

L’API Fetch est un outil flexible qui facilite la récupération de nombreux types de données, comme le texte, le JSON et les données binaires. Une fois que vous comprenez ces bases, il sera plus simple de les appliquer au chapitre suivant, incluant la gestion des erreurs et les requêtes POST.

Dans la section suivante, nous expliquerons en détail la gestion des erreurs avec l’API Fetch.

4. Gestion des erreurs

Dans cette section, nous expliquons la gestion des erreurs lors de l’utilisation de l’API Fetch. Lors de la communication avec un serveur, divers problèmes peuvent survenir, tels que des erreurs réseau et des erreurs de réponse. Les gérer correctement peut améliorer l’expérience utilisateur.

Bases de la gestion des erreurs

Avec l’API Fetch, vous pouvez utiliser la méthode catch() pour gérer des cas comme les échecs réseau ou les réponses d’erreur.

Exemple de gestion d’erreur basique

fetch('https://example.com/data')
  .then(response => {
    if (!response.ok) { // Check the response status code
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('An error occurred:', error)); // Error handling

Gestion des erreurs avec try…catch

Utiliser Async/Await vous permet d’écrire un code plus propre et plus lisible. Dans ce cas, vous gérez les erreurs avec une instruction try...catch.

Exemple : Gestion des erreurs avec Async/Await

async function fetchData() {
  try {
    const response = await fetch('https://example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

fetchData();

Implémentation des délais d’attente

L’API Fetch n’inclut pas de fonctionnalité de délai d’attente intégrée par défaut. Cependant, implémenter des délais d’attente vous permet de gérer correctement les réponses lentes.

Exemple : Implémentation d’un délai d’attente

function fetchWithTimeout(url, timeout = 5000) {
  return Promise.race([
    fetch(url),
    new Promise((_, reject) =>
      setTimeout(() => reject(new Error('Request timed out')), timeout)
    ),
  ]);
}

fetchWithTimeout('https://example.com/data', 5000)
  .then(response => {
    if (!response.ok) {
      throw new Error(`Erreur HTTP ! Statut : ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Une erreur s\'est produite :', error));

Detecting network errors

A network error refers to cases where the server cannot be reached or the connection is interrupted. With the Fetch API, these errors can also be detected with catch().

Example: Handling a network error

fetch('https://invalid-url.com/data')
  .then(response => response.json())
  .catch(error => console.error('Erreur réseau :', error.message));

Summary

In this section, we introduced error handling with the Fetch API, from basics to more advanced patterns.

Key takeaways

• Check response status codes and implement error handling
• Simplify error handling with Async/Await
• Handle slow responses by implementing timeouts

Error handling is critical for improving the user experience. In the next section, we’ll explain POST requests for sending data to a server.

5. Sending POST requests

In this section, we explain how to send POST requests with the Fetch API to send data to a server. We’ll cover practical examples such as sending form data and JSON.

Basic syntax for POST requests

You can implement a POST request in the Fetch API by providing an options object as the second argument to the fetch() method.

Basic syntax

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Erreur :', error));

Example: Sending JSON data

Below is an example of sending user information in JSON format.

const userData = {
  name: 'Taro Yamada',
  email: 'yamada@example.com',
};

fetch('https://example.com/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(userData),
})
  .then(response => {
    if (!response.ok) {
      throw new Error(`Erreur HTTP ! Statut : ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log('Succès :', data))
  .catch(error => console.error('Erreur :', error));

Example: Sending form data

To send form data, use the FormData object.

const formData = new FormData();
formData.append('username', 'yamada');
formData.append('file', fileInput.files[0]);

fetch('https://example.com/upload', {
  method: 'POST',
  body: formData,
})
  .then(response => response.json())
  .then(data => console.log('Téléversement réussi :', data))
  .catch(error => console.error('Erreur :', error));

Example: Requests with authentication information

When sending data along with authentication information (for example, a token), add the auth data to the request headers.

fetch('https://example.com/api/protected', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
  },
  body: JSON.stringify({ message: 'Hello!' }),
})
  .then(response => response.json())
  .then(data => console.log('Succès :', data))
  .catch(error => console.error('Erreur :', error));

Error handling for POST requests

For POST requests, you can add error handling like the following to deal with network issues or server-side problems.

async function postData(url, data) {
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    if (!response.ok) {
      throw new Error(`Erreur HTTP ! Statut : ${response.status}`);
    }

    const result = await response.json();
    console.log('Succès :', result);
  } catch (error) {
    console.error('Une erreur s\'est produite :', error.message);
  }
}

postData('https://example.com/api/messages', { text: 'Bonjour !' });

Summary

In this section, we explained the basics and practical usage of POST requests using the Fetch API.

Key takeaways

1. How to send JSON data and form data
2. How to implement requests with authentication information
3. How to strengthen error handling

POST requests are essential for two-way communication with servers. In the next section, we’ll explain customization options for the Fetch API in detail.

6. Other option settings

In this section, we explain various option settings you can specify as the second argument to the Fetch API. By using these, you can easily customize requests and manage authentication information.

Basic option syntax

Fetch API options are specified as an object in the second argument.

fetch(url, {
  method: 'GET',              
  headers: {                  
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
  },
  body: JSON.stringify(data), 
  credentials: 'include',     
  mode: 'cors',               
  cache: 'no-cache',          
  redirect: 'follow',         
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Erreur :', error));

Details of each option

1. method (HTTP method)

• Specifies the HTTP method (for example: GET, POST, PUT, DELETE).
• The default is GET .

1. headers (headers)

• Specifies request headers.
• Used to define the data format or add authentication information.

  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
  }
  

3. body (sending data)

• Used to send data to the server with POST or PUT methods.

3. credentials (managing credentials)

• Controls whether credentials (cookies or HTTP authentication data) are sent.

5. mode (CORS policy)

• Controls cross-origin request behavior.

6. cache (cache control)

• Controls how request caching is used.

7. redirect (redirect handling)

• Specifies how redirects are handled.

Advanced customization example

Below is an example that combines multiple options.

fetch('https://example.com/api/resource', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
  },
  body: JSON.stringify({ message: 'Bonjour !' }),
  credentials: 'include',
  mode: 'cors',
  cache: 'no-cache',
  redirect: 'follow',
})
  .then(response => response.json())
  .then(data => console.log('Succès :', data))
  .catch(error => console.error('Erreur :', error));

Summary

In this section, we explained various Fetch API option settings in detail.

Key takeaways

1. How to customize headers and credentials
2. Fine-grained settings such as CORS and cache control
3. Advanced patterns for redirects and error handling

In the next section, we’ll introduce concrete examples of how to use the Fetch API in practice.

7. Practical examples of using the Fetch API

In this section, we explain how you can use the Fetch API in real projects with concrete examples. Through practical scenarios, you’ll build real-world Fetch API skills.

Displaying a list of API data

A common use case in web applications is fetching data from an external API and displaying it as a list. In the example below, we fetch post data from the JSONPlaceholder API and display it as an HTML list.

Code example

const url = 'https://jsonplaceholder.typicode.com/posts';

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(posts => {
    const list = document.getElementById('post-list');
    posts.forEach(post => {
      const listItem = document.createElement('li');
      listItem.textContent = `${post.id}: ${post.title}`;
      list.appendChild(listItem);
    });
  })
  .catch(error => console.error('Error:', error));

HTML example

<ul id="post-list"></ul>

Submitting a form and registering data

This is an example of registering data from a form input to a server.

Code example

const form = document.getElementById('user-form');
form.addEventListener('submit', async (e) => {
  e.preventDefault();

  const formData = {
    name: document.getElementById('name').value,
    email: document.getElementById('email').value,
  };

  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(formData),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const result = await response.json();
    console.log('Registration successful:', result);
    alert('The user has been registered!');
  } catch (error) {
    console.error('Error:', error);
    alert('An error occurred.');
  }
});

HTML example

<form id="user-form">
  <input type="text" id="name" placeholder="Name" required />
  <input type="email" id="email" placeholder="Email address" required />
  <button type="submit">Register</button>
</form>

File upload

The Fetch API can also handle file uploads. Below is an example of uploading an image file to a server.

Code example

const fileInput = document.getElementById('file-input');
const uploadButton = document.getElementById('upload-button');

uploadButton.addEventListener('click', async () => {
  const file = fileInput.files[0];
  const formData = new FormData();
  formData.append('file', file);

  try {
    const response = await fetch('https://example.com/upload', {
      method: 'POST',
      body: formData,
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const result = await response.json();
    console.log('Upload successful:', result);
    alert('The file has been uploaded!');
  } catch (error) {
    console.error('Error:', error);
    alert('Upload failed.');
  }
});

HTML example

<input type="file" id="file-input" />
<button id="upload-button">Upload</button>

Summary

In this section, we introduced practical examples using the Fetch API.

Key takeaways

1. Creating a dynamic list by displaying API data
2. Implementing form submission and data registration
3. Implementing file uploads and search functionality

By using these examples as references, you can build interactive web applications powered by the Fetch API. In the next section, we’ll summarize the entire article and introduce learning resources for your next steps.

8. Summary

In this article, we explained JavaScript’s Fetch API systematically—from the basics to practical use. The Fetch API is a powerful tool that enables asynchronous communication concisely and efficiently, making it essential for modern web application development.

Review of what you learned

1. Overview and features of the Fetch API

• The Fetch API is Promise-based, allowing concise and flexible code.
• Compared to traditional XMLHttpRequest, the syntax is simpler and easier to maintain.

1. Basic usage and error handling

• Basic syntax for fetching data with GET requests.
• By adding error handling and timeout processing, you can implement more robust code.

1. Sending data with POST requests

• Exemples d’envoi de données JSON et de données de formulaire.
• Appris comment ajouter des informations d’authentification et des en‑têtes personnalisés.

1. Utiliser efficacement les paramètres d’option

• Présenté des méthodes de personnalisation flexibles telles que le contrôle du cache, les paramètres CORS et la gestion des identifiants.

1. Exemples pratiques

• Appris l’utilisation réelle à travers des exemples tels que l’affichage de listes, la soumission de formulaires, le téléchargement de fichiers et la fonctionnalité de recherche.

Avantages et points à noter pour l’API Fetch

Avantages

• Le code est concis et très lisible.
• Fonctionne bien avec les Promises et Async/Await, ce qui facilite la combinaison avec la syntaxe JavaScript moderne.
• Prend en charge de nombreux formats de données tels que JSON, les données binaires et les flux.

Points à noter

• Il n’existe pas de fonctionnalité de timeout par défaut, vous devrez donc éventuellement l’implémenter vous‑même.
• Il n’est pas pris en charge par les anciens navigateurs (par exemple, Internet Explorer), pensez donc à des polyfills ou des alternatives si nécessaire.

Ressources d’apprentissage pour les prochaines étapes

Pour approfondir votre compréhension de l’API Fetch, utilisez la documentation officielle et les ressources ci‑dessous.

• MDN Web Docs (API Fetch) https://developer.mozilla.org/ja/docs/Web/API/Fetch_API
• Documentation JavaScript sur MDN https://developer.mozilla.org/ja/docs/Web/JavaScript
• Projets d’exemple et collections de code Il peut également être utile d’explorer des projets réels utilisant l’API Fetch sur GitHub ou CodePen.

Enfin

L’API Fetch est un outil puissant qui vous permet d’implémenter la communication serveur simplement en utilisant les techniques JavaScript modernes. En appliquant ce que vous avez appris dans cet article, vous pouvez créer des applications web plus interactives et riches en fonctionnalités.

À mesure que le développement web continue d’évoluer, l’intégration d’API et le traitement asynchrone deviendront encore plus importants. Maîtrisez l’API Fetch et perfectionnez vos compétences pratiques !

Prochaines étapes

• Essayez de créer un projet qui utilise une API réelle.
• Utilisez des options personnalisées pour mettre en œuvre une gestion de requêtes plus avancée.
• Lancez-vous le défi de construire des applications full‑stack qui s’intègrent à un backend serveur.

Ceci conclut l’article. Nous espérons que l’apprentissage de l’API Fetch vous aidera à améliorer encore davantage vos compétences !