Fetch API

L'API Fetch est un outil moderne et puissant de requête réseau qui vous permet de demander des ressources de manière asynchrone via JavaScript sans utiliser l'objet traditionnel XMLHttpRequest.

L'API Fetch peut envoyer de manière concise des requêtes HTTP et gérer les réponses du serveur.

L'API Fetch est conçue sur la base des Promises, ce qui rend les opérations asynchrones plus concises et plus faciles à comprendre.

Avantages de Fetch :

  • Reposant surPromises, ce qui rend le code plus concis et lisible.
  • Meilleur mécanisme de gestion des erreurs : ne renvoie une erreur que sur des erreurs réseau (comme l'impossibilité de se connecter au serveur)catch, plutôt que des erreurs de code d'état.
  • Prend en charge plusieurs formats de données (JSON, texte, binaire, etc.).
  • Peut gérer les requêtes cross-origin, grâce àCORSla configuration du mécanisme.

Utilisation de base de fetch

La syntaxe de fetch est assez concise ; la forme la plus basique est :

fetch(url)
  .then(response => response.json()) // 解析 JSON 数据
  .then(data => console.log(data))   // 处理数据
  .catch(error => console.error('Error:', error)); // 错误处理

Paramètres :

  • url: L'URL cible à laquelle envoyer la requête.
  • options(Facultatif) : Vous pouvez spécifier la méthode de requête (GET, POST, etc.), les en-têtes de requête, le corps de requête, et plus encore.

Valeur de retour

Renvoie un objet Promise. La Promise renvoie un objet Response lorsque la requête réussit, et est rejetée en cas d’échec.

Utilisation de Fetch

1. Requête GET de base :

Exemple

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

Dans cet exemple, fetch effectue une requête GET par défaut. La réponse renvoyée est un objet Response, et les données JSON sont analysées en appelant la méthode .json().

2. Envoi d'une requête POST :

Exemple

fetch('https://api.example.com/data', {
    method: 'POST', // Spécifier la méthode de la requête
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        key: 'value'
    })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Ici, nous envoyons une requête POST en définissant la propriété method sur 'POST', et envoyons des données au format JSON dans le corps de la requête.

3. Gestion du statut de la réponse :

Exemple

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

Lors de la gestion de la réponse, nous vérifions d'abord si le statut de la réponse est réussi (response.ok), et lançons une erreur s'il ne l'est pas.

4. Envoi de requêtes avec des identifiants :

Exemple

fetch('https://api.example.com/data', {
    credentials: 'include' // Inclure les cookies dans la requête
});

L'utilisation de credentials: 'include' permet d'envoyer des cookies dans les requêtes cross-origin.

5. Utilisation des objets Request et Response :

Exemple

const request = new Request('flowers.jpg');
fetch(request)
    .then(response => response.blob())
    .then(imageBlob => {
        const imageObjectUrl = URL.createObjectURL(imageBlob);
        img.src = imageObjectUrl;
    });

Vous pouvez créer un objet Request pour personnaliser la requête. fetch renvoie un objet Response, que vous pouvez utiliser pour obtenir différents types de corps de réponse, tels que blob, text, json, etc.

6. Gestion des erreurs :

Exemple

fetch('https://api.example.com/data')
    .then(response => {
        if (response.ok) {
            return response.json();
        }
        throw new Error('Something went wrong');
    })
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

Dans un appel chaîné, les erreurs levées n'importe où seront interceptées par .catch().

7. Définition des en-têtes de requête

Vous pouvez ajouter des informations d'en-tête HTTP personnalisées à la requête en utilisant la propriété headers, telles que Content-Type, Authorization, etc.

Exemple

fetch('https://example.com/api', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your-token'
    },
    body: JSON.stringify({ name: 'John', age: 30 })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

8. Gestion des statuts de réponse non-200

fetch ne traite pas automatiquement les statuts d'erreur HTTP (tels que 404 ou 500) comme des Promises rejetées ; vous devez encore vérifier le statut de la réponse.

Exemple

fetch('https://example.com/api')
  .then(response => {
    if (!response.ok) { // Vérifier le statut de la réponse
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Erreur fetch:', error));

9. Envoi de données de formulaire

Vous pouvez utiliser l'objet FormData pour envoyer des données de formulaire au serveur :

Exemple

const formData = new FormData();
formData.append('username', 'John');
formData.append('email', '[email protected]');

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

Requêtes cross-origin

Si des requêtes cross-origin sont nécessaires, vous pouvez configurer CORS (Cross-Origin Resource Sharing) côté serveur. Côté front-end, vous pouvez également utiliser l'option credentials pour spécifier s'il faut envoyer des informations d'authentification telles que les cookies.

Exemple

fetch('https://example.com/api', {
    method: 'GET',
    credentials: 'include' // Autoriser l'envoi de cookies avec les requêtes cross-origin
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Fetch et PHP

L'utilisation de requêtes AJAX en PHP n'est essentiellement pas différente de l'utilisation d'AJAX dans d'autres langages backend. Les scripts PHP reçoivent des requêtes, traitent les données et renvoient des réponses côté serveur.

Le code JavaScript côté client utilise l'API Fetch pour envoyer des requêtes et traiter les réponses.

Par exemple, si vous avez un fichier PHP server.php qui reçoit une requête GET et renvoie des données, vous pouvez utiliser Fetch comme ceci :

Exemple

fetch('server.php?query=123')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

Côté PHP, vous allez analyser les paramètres de la requête et renvoyer une réponse :

Exemple

<?php
// server.php
$queryString = $_SERVER['QUERY_STRING'];
parse_str($queryString, $params);
$responseData = array('status' => 'success', 'data' => $params);
echo json_encode($responseData);
?>

De cette façon, vous pouvez utiliser l'API Fetch côté client pour communiquer avec le backend PHP.

Autres extensions