Guide complet de l’API Fetch JavaScript : bases, exemples, gestion des erreurs et sécurité

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

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

1. Introduction : Qu’est‑ce que l’API Fetch ?

JavaScript joue un rôle crucial dans le développement front‑end des applications web. Parmi ses nombreuses fonctionnalités, l’API Fetch est un outil puissant pour effectuer des communications asynchrones avec les serveurs. Dans cet article, nous expliquons comment utiliser l’API Fetch de manière accessible aux débutants et présentons ses fonctionnalités à travers des exemples pratiques.

Quel est le rôle de l’API Fetch ?

L’API Fetch est une interface moderne et standard pour gérer les requêtes et réponses HTTP. Par le passé, XMLHttpRequest était couramment utilisé, mais l’API Fetch propose une conception plus simple et plus intuitive.

Différences entre l’API Fetch et XMLHttpRequest

Les principales différences entre l’API Fetch et le XMLHttpRequest traditionnel sont les suivantes.

Comme le montre le tableau ci‑dessus, l’API Fetch est largement utilisée comme un outil plus flexible et convivial pour les développeurs dans le développement web moderne.

Cas d’utilisation courants de l’API Fetch

L’API Fetch est couramment utilisée dans les scénarios suivants.

1. Récupération de données : Récupérer les informations d’un utilisateur ou les données d’un article depuis des API.
2. Soumission de données : Envoyer des données de formulaire ou des données JSON à un serveur.
3. Mises à jour en temps réel : Recevoir des données dynamiques d’un serveur et mettre à jour le contenu de la page.
4. Intégration d’API externes : Se connecter à des API tierces pour étendre les fonctionnalités.

Pour ces raisons, l’API Fetch est devenue une partie essentielle du développement JavaScript moderne.

Résumé

Dans cette section, nous avons expliqué le rôle de base et les avantages de l’API Fetch. Comparée au XMLHttpRequest traditionnel, l’API Fetch est plus intuitive, plus facile à utiliser et basée sur les Promises, ce qui simplifie la gestion des erreurs. Dans la section suivante, nous explorerons l’utilisation de base de l’API Fetch à l’aide d’exemples de code concrets.

En poursuivant, vous apprendrez comment récupérer et manipuler des données avec l’API Fetch en pratique.

2. Utilisation de base de l’API Fetch (avec du code d’exemple)

Dans cette section, nous expliquons l’utilisation de base de l’API Fetch à l’aide d’exemples de code concrets. Même les débutants peuvent suivre, en commençant par une requête GET simple.

Syntaxe de base de l’API Fetch

La syntaxe de base de l’API Fetch est présentée ci‑dessous.

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

• url : Spécifie l’URL de la requête.
• options : Utilisé pour configurer les méthodes HTTP et les en‑têtes (facultatif).
• then : Gère la réponse.
• catch : Gère les erreurs.

Exemple de requête GET

Voici un exemple basique de requête GET.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('A network error occurred');
    }
    return response.json();
  })
  .then(data => {
    console.log(data); // Display data
  })
  .catch(error => {
    console.error('Error:', error);
  });

Utilisation de async/await

Avec le JavaScript moderne, vous pouvez écrire un code plus propre en utilisant async/await.

async function fetchPost() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) {
      throw new Error('A network error occurred');
    }
    const data = await response.json();
    console.log(data); // Display data
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchPost();

Ajout de paramètres d’URL

Pour inclure des paramètres de requête, écrivez la requête comme suit.

const userId = 1;
fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Résumé

Dans cette section, nous avons couvert les bases de la réalisation de requêtes GET avec l’API Fetch.

• Syntaxe de base : Conception simple et facile à comprendre.
• Gestion des erreurs : Prend en charge les erreurs réseau et HTTP.
• async/await : Améliore la lisibilité et la maintenabilité.
• Paramètres d’URL : Permet de mettre en œuvre facilement des conditions dynamiques.

La section suivante explique comment traiter les données de réponse renvoyées par l’API Fetch plus en détail.

3. Gestion des réponses et conversion des formats de données

Dans cette section, nous expliquons comment gérer les réponses récupérées à l’aide de l’API Fetch. Nous nous concentrons notamment sur la conversion des données JSON et la manipulation des données texte et binaires.

Qu’est-ce que l’objet de réponse de l’API Fetch ?

Avec l’API Fetch, la réponse renvoyée après une requête est fournie sous la forme d’un objet Response.

Principales propriétés

Récupération et conversion des données JSON

Avec l’API Fetch, les serveurs renvoient souvent des données au format JSON.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('Response error: ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Récupération de données texte

Dans certains cas, vous pouvez avoir besoin de récupérer des données en texte brut plutôt qu’en JSON.

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

Récupération de données binaires

Pour récupérer des images ou des fichiers sous forme de données binaires, utilisez blob() ou arrayBuffer().

fetch('https://example.com/image.jpg')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    document.getElementById('image').src = url;
  })
  .catch(error => console.error('Error:', error));

Résumé

Dans cette section, vous avez appris comment gérer les réponses de l’API Fetch et convertir les formats de données.

• Données JSON : Prend en charge le format de réponse serveur le plus courant.
• Données texte et binaires : Récupérez différents formats selon les besoins.
• En-têtes de réponse : Utiles pour la gestion des données et les vérifications de sécurité.

4. Envoi de requêtes POST (avec exemples pratiques)

Dans cette section, nous expliquons comment envoyer des données à un serveur à l’aide de requêtes POST avec l’API Fetch. Nous couvrons comment envoyer des données de formulaire et des données JSON à l’aide d’exemples pratiques.

Syntaxe de base pour une requête POST

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})

• method : Spécifie la méthode HTTP à utiliser (dans ce cas, POST).
• headers : Spécifie le format des données (par ex., JSON ou données de formulaire).
• body : Convertit les données en chaîne de caractères et les envoie.

Exemple : envoi de données JSON

const userData = {
  name: 'Taro Tanaka',
  email: 'taro.tanaka@example.com'
};

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));

Exemple : envoi de données de formulaire

const formData = new FormData();
formData.append('name', 'Taro Tanaka');
formData.append('email', 'taro.tanaka@example.com');

fetch('https://example.com/api/submit', {
  method: 'POST',
  body: formData
})
  .then(response => response.text())
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));

Exemple : requête avec authentification

fetch('https://example.com/api/protected', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
  },
  body: JSON.stringify({ query: 'data' })
})
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));

Résumé

Dans cette section, nous avons couvert les bases et l’utilisation pratique des requêtes POST avec l’API Fetch.

• Envoi de données JSON : Idéal pour l’intégration d’API.
• Envoi de données de formulaire : Fonctionne bien pour les formulaires simples et les téléchargements de fichiers.
• Requêtes authentifiées : Prend en charge les exigences de sécurité des API.

La section suivante explore plus en profondeur la gestion des erreurs et les techniques de débogage de l’API Fetch.

5. Gestion des erreurs et techniques de débogage

Dans cette section, nous examinons en détail la gestion des erreurs et les techniques de débogage lors de l’utilisation de l’API Fetch.

Erreurs courantes qui surviennent avec l’API Fetch

Gestion de base des erreurs

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

Gestion des délais d’attente

const controller = new AbortController();
const signal = controller.signal;

const timeout = setTimeout(() => controller.abort(), 5000);

fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('Timeout: The request was aborted');
    } else {
      console.error('Error:', error.message);
    }
  })
  .finally(() => clearTimeout(timeout));

Techniques de débogage

1. Journalisation de la sortie :

   fetch('https://example.com/api/data')
     .then(response => {
       console.log('Status code:', response.status);
       return response.json();
     })
     .then(data => console.log('Data:', data))
     .catch(error => console.error('Error:', error.message));
   

2. Outils de développement du navigateur (onglet Réseau) :

• Inspectez les requêtes et les réponses en temps réel.

Résumé

Dans cette section, nous avons exploré la gestion des erreurs et les techniques de débogage pour l’API Fetch.

• Erreurs courantes : Erreurs réseau, erreurs d’analyse JSON et problèmes de délai d’attente.
• Gestion détaillée des erreurs : Exemples pratiques avec une logique de gestion des erreurs claire.
• Débogage : Identifier les problèmes à l’aide des journaux et des outils de développement du navigateur.

La section suivante explique les modèles d’utilisation avancés et les mesures de sécurité pour l’API Fetch.

6. Utilisation avancée et mesures de sécurité

Dans cette section, nous expliquons les techniques d’utilisation avancées et les considérations de sécurité pour l’API Fetch.

Annulation des requêtes (AbortController)

const controller = new AbortController();
const signal = controller.signal;

fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('The request was aborted');
    } else {
      console.error('Error:', error.message);
    }
  });

setTimeout(() => controller.abort(), 3000); // Abort after 3 seconds

Requêtes avec des informations d’authentification

const token = 'YOUR_ACCESS_TOKEN';

fetch('https://example.com/api/protected', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Error:', error));

Support CORS (Partage des ressources entre origines)

fetch('https://example.com/api/data', {
  method: 'GET',
  mode: 'cors'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Résumé

Dans cette section, nous avons couvert l’utilisation avancée de l’API Fetch et les mesures de sécurité.

• Abandon de requête : Améliorez l’efficacité en utilisant AbortController.
• Requêtes authentifiées : Implémentez des jetons d’API et des contre‑mesures CSRF.
• Gestion du CORS : Résolvez les problèmes de cross‑origin grâce à une configuration appropriée.

7. Erreurs courantes et dépannage (avec tableau récapitulatif)

Dans cette section, nous expliquons les erreurs courantes que vous pouvez rencontrer lors de l’utilisation de l’API Fetch et comment les résoudre.

Erreurs courantes et leurs causes

Gestion détaillée des erreurs

fetch('https://invalid-url.example.com')
  .then(response => response.json())
  .catch(error => {
    if (error.message.includes('Failed to fetch')) {
      console.error('Network error');
    } else {
      console.error('Other error:', error.message);
    }
  });

Résumé

Dans cette section, nous avons passé en revue les erreurs courantes de l’API Fetch et comment les gérer.

• Erreurs typiques : Erreurs réseau, erreurs de format JSON et problèmes de délai d’attente.
• Gestion détaillée : Exemples pratiques démontrant une gestion robuste des erreurs.

8. Exemple pratique : créer une application web simple en utilisant les données d’une API

Dans cette section, nous expliquons comment créer une application web simple qui récupère des données d’une API externe en utilisant l’API Fetch.

Préparer le HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Fetch API Sample App</title>
</head>
<body>
  <h1>Post List</h1>
  <button id="fetchButton">Fetch Data</button>
  <ul id="postList"></ul>
  <p id="errorMessage" style="color: red;"></p>

  <script src="app.js"></script>
</body>
</html>

Créer le code JavaScript

const fetchButton = document.getElementById('fetchButton');
const postList = document.getElementById('postList');
const errorMessage = document.getElementById('errorMessage');

async function fetchPosts() {
  fetchButton.disabled = true;
  errorMessage.textContent = '';
  postList.innerHTML = '';

  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    const posts = await response.json();
    posts.forEach(post => {
      const listItem = document.createElement('li');
      listItem.textContent = `${post.id}: ${post.title}`;
      postList.appendChild(listItem);
    });
  } catch (error) {
    errorMessage.textContent = 'Failed to retrieve data.';
  } finally {
    fetchButton.disabled = false;
  }
}

fetchButton.addEventListener('click', fetchPosts);

Résumé

Dans cette section, nous avons démontré comment construire une application web pratique en utilisant l’API Fetch.

• Fonctionnalités principales : Récupération de données et rendu de listes.
• Gestion des erreurs : Affichage de messages conviviaux en cas d’échec.

9. Conclusion et prochaines étapes

Dans cet article, nous avons couvert l’API Fetch de manière exhaustive, des bases à l’utilisation avancée et aux exemples pratiques. Dans cette section finale, nous passons en revue les points clés de chaque section et suggérons ce qu’il faut apprendre ensuite.

Points clés à retenir

Structure de base et fonctionnalités de l’API Fetch

• L’API Fetch est une interface puissante pour effectuer des communications asynchrones avec les serveurs en JavaScript.
• Comparée à la traditionnelle XMLHttpRequest, elle est plus simple, plus flexible et basée sur les Promises, ce qui améliore grandement la lisibilité.

Récupération de données et gestion des réponses

• Nous avons expliqué comment récupérer des données JSON, texte et binaires.
• En utilisant async/await, vous pouvez écrire un code plus intuitif avec une gestion des erreurs plus simple.

Soumission de données et requêtes POST

• Vous avez appris comment envoyer des données JSON et des données de formulaire à un serveur.
• Les requêtes sécurisées utilisant des jetons d’authentification ont également été abordées.

Techniques de gestion des erreurs et de débogage

• Nous avons présenté des solutions pratiques pour les erreurs réseau et les erreurs d’analyse JSON.
• Des techniques avancées telles que les délais d’attente des requêtes et l’annulation des requêtes ont été mises en œuvre.

Construction d’applications web pratiques

• Vous avez construit une application web qui récupère des données d’une API externe et les affiche dynamiquement dans l’interface utilisateur.
• Grâce à la gestion des erreurs et au contrôle de l’état des boutons, vous avez appris des modèles de conception qui reflètent des scénarios de développement réels.

Prochaines étapes

Pour tirer encore meilleur parti de l’API Fetch, envisagez d’apprendre les sujets suivants.

Techniques avancées d’implémentation d’API

• Pagination et tri : Optimisez le traitement lors de la manipulation de grands ensembles de données.
• Fonctionnalité de recherche : Implémentez le filtrage des données basé sur l’entrée de l’utilisateur.
• Téléversements de fichiers : Gérez les téléversements d’images et de vidéos.

Améliorations de la sécurité

• OAuth 2.0 et authentification : Comprenez les processus d’authentification et d’autorisation pour des connexions API sécurisées.
• Protection CSRF et XSS : Mettez en œuvre des soumissions de formulaires plus sûres et défendez-vous contre les scripts malveillants.

Intégration avec les technologies modernes

• Bibliothèque Axios : Une alternative populaire à l’API Fetch qui simplifie la gestion des requêtes HTTP.
• GraphQL : Un modèle de conception d’API moderne qui optimise la récupération des données par rapport aux API REST.
• Communication en temps réel : Implémentez l’échange de données en temps réel en utilisant WebSocket ou les Server‑Sent Events.

Ressources d’apprentissage

Utilisez la documentation officielle et les ressources d’apprentissage suivantes pour améliorer davantage vos compétences.

• MDN Web Docs (Officiel) : Documentation détaillée de l’API Fetch
• JSONPlaceholder (API de test) : Une API factice gratuite pour les tests
• Site d’apprentissage JavaScript : JavaScript.info

Notes finales

À travers cet article, vous avez acquis des connaissances et des compétences pratiques couvrant tout, des bases à l’utilisation réelle de l’API Fetch.

L’API Fetch est largement utilisée pour des tâches allant de la simple récupération de données à des intégrations d’API complexes. En appliquant ce que vous avez appris ici à des projets réels, vous pouvez acquérir encore plus d’expérience pratique.

Prochaines actions :

• Créez de petits projets en utilisant des API réelles pour acquérir une expérience pratique.
• Renforcez la gestion des erreurs et les mesures de sécurité pour améliorer la préparation à la production.
• Adoptez de nouvelles technologies telles que GraphQL et la communication en temps réel pour élargir davantage votre ensemble de compétences.