Récupérer la réponse : scoped,global

  • Rversion finale: Yokohama
  • Mis à jour 30 janv. 2025
  • 12 minutes de lecture

    • L’API Fetch Response fournit des méthodes pour créer un nouvel objet Response et pour gérer le corps de la réponse créé par une méthode Fetch Request API.

    L’API Fetch Response fait partie d’un ensemble d’API Fetch , qui fournissent diverses actions pour extraire des ressources à partir de sites web externes. La collection complète d’API d’extraction comprend :

    Pour prendre en charge les actions d’extraction, la propriété système glide.hosts.allowlist permet de contrôler les hôtes auxquels une méthode d’extraction peut accéder. Il s’applique aux API HTTP comme RestMessageV2 et celles mentionnées ci-dessus. Pour plus d’informations sur glide.hosts.allowlist, reportez-vous à la section Available system properties.

    Propriétés de la réponse

    L’API de réponse fournit des propriétés qui renvoient des détails sur la réponse HTTP. Ces propriétés vous permettent d’accéder aux métadonnées (comme l’état, les en-têtes, le type) et au corps de la réponse (body) pour un traitement ultérieur. Ils permettent de vérifier la réussite d’une demande (ok) et d’analyser les données renvoyées dans différents formats (par exemple, JSON ou texte). Ces propriétés sont importantes pour la validation et la gestion des réponses du serveur dans les applications côté client. Pour lire des explications plus détaillées sur chaque propriété, reportez-vous à la section https://developer.mozilla.org/en-US/docs/Web/API/Response.

    Tableau 1. Propriétés de la réponse
    Nom de la propriété Description Exemple
    body Prêt uniquement. Contient un flux lisible de données d’octets dans le contenu du corps de la réponse.

    Valeurs valides : A ReadableStream ou null.

    Type de données : chaîne

    		 
    const request = new Request("/myEndpoint", {
  method: "POST",
  body: "Hello world",
});

request.body; // ReadableStream
    bodyUsed Prêt uniquement. Marqueur indiquant si le corps a déjà été lu.
    Valeurs acceptées :
    • vrai : le corps a été lu.
    • faux : Le corps n’a pas été lu.

    Type de données : booléennes

    		 
    const request = new Request("/myEndpoint", {
  method: "POST",
  body: "Hello world",
});

request.bodyUsed; // false

request.text().then((bodyAsText) => {
  console.log(request.bodyUsed); // true
});
    en-têtes Lecture seule. Objet En-têtes associé à la réponse.

    Type de données : objet d’en-têtes

    		 
    const myRequest = new Request("flowers.jpg");
const myHeaders = myRequest.headers; // Headers {}
    ok Prêt uniquement. Marqueur indiquant si la réponse a réussi (état compris entre 200 et 299) ou non.
    Valeurs acceptées :
    • vrai : la réponse a réussi.
    • faux : la réponse a échoué.

    Type de données : booléennes

    		 
    const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

fetch(myRequest).then((response) => {
  console.log(response.ok); // returns true if the response returned successfully
  response.blob().then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
});
    redirigé Lecture seule. Marqueur indiquant si la réponse résulte d’une redirection de la demande.
    Valeurs acceptées :
    • vrai : la demande a été redirigée.
    • Faux : la demande n’a pas été redirigée.

    Type de données : booléennes

    		 
    const myRequest = new Request("flowers.jpg");
const myCred = myRequest.redirect;
    statut Lecture seule. Codes d’état HTTP de la réponse. Par exemple, 200 pour un succès.

    Type de données : nombre

    		 
    const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

fetch(myRequest)
  .then((response) => {
    console.log("response.status =", response.status); // response.status = 200
    return response.blob();
  })
  .then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
    Texte d’état Lecture seule. Message d’état correspondant au code d’état HTTP dans response.status. Par exemple, cela conviendrait pour un code d’état 200, Continuer pour 100, Introuvable pour 404.

    Type de données : chaîne

    		 
    const myRequest = new Request("flowers.jpg");

 // Log the HTTP status and status text
    console.log(`Status: ${response.status}`);
    console.log(`Status Text: ${response.statusText}`);
    
    // Check if the response is successful
    if (response.ok) {
      console.log("Request succeeded!");
    } else {
      console.log("Request failed.");
    }
  } catch (error) {
    console.error("Error fetching the URL:", error);
  }
}
    type Lecture seule. Type de réponse.
    Valeurs acceptées :
    • basic : réponse normale, même origine, avec tous les en-têtes exposés sauf « Set-Cookie ».
    • cors : la réponse a été reçue à partir d’une demande d’origine croisée valide. Certains en-têtes et le corps sont accessibles.
    • erreur : erreur de réseau. Aucune information utile décrivant l’erreur n’est disponible. L’état de la réponse est 0, les en-têtes sont vides et immuables. Il s’agit du type d’une réponse obtenue à partir de Response.error().
    • opaque : réponse pour une demande « no-cors » à une ressource d’origine croisée. Sévèrement restreint.
    • opaqueredirect : la demande d’extraction a été effectuée avec la redirection : « manual ». L’état de la réponse est 0, les en-têtes sont vides, le corps est nul et la remorque est vide.

    Type de données : chaîne

    		 
    const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

fetch(myRequest)
  .then((response) => {
    console.log("response.type =", response.type); // response.type = 'basic'
    return response.blob();
  })
  .then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
    URL Lecture seule. URL de la réponse.

    Type de données : chaîne

    		 
    const myRequest = new Request("flowers.jpg");
const myURL = myRequest.url; // "https://github.com/mdn/dom-examples/tree/main/fetch/fetch-request/flowers.jpg"

    Récupérer la réponse : réponse (corps de l’objet, options de l’objet)

    Crée un nouvel objet de réponse à l’aide du constructeur Response( ).

    Tableau 2. Paramètres
    Nom Type Description
    body Objet Facultatif. Un objet définissant un corps pour la réponse.
    Types valides :
    • Tampon de tableau
    • Objet blob
    • Vue des données
    • FormData
    • Flux lisible
    • Chaîne
    • Littéral de chaîne
    • TypedArray
    • URLSearchParams

    Valeur par défaut : nul
    options Objet Facultatif. Objet d’options contenant les paramètres personnalisés que vous souhaitez appliquer à la réponse, ou un objet vide (qui correspond à la valeur par défaut). Les options possibles sont les suivantes :
    • headers : tous les en-têtes que vous souhaitez ajouter à votre réponse, contenus dans un objet ou un Extraire les en-têtes : dans le champ d’application, global littéral d’objet de paires clé/valeur de chaîne (voir En-têtes HTTP pour une référence). Vide par défaut.
    • état : code d’état de la réponse. La valeur par défaut est 200.
    • statusText : le message d’état associé au code d’état, tel que « OK ». La valeur par défaut est «  ».

    Dans cet exemple, nous créons un nouvel objet Response à l’aide du constructeur, en passant un nouvel objet Blob comme corps, et un objet init contenant des options d’état personnalisé et de statusText :

    const myBlob = new Blob();
const myOptions = { status: 200, statusText: "Status message!" };
const myResponse = new Response(myBlob, myOptions);

    Récupérer la réponse : arrayBuffer()

    Renvoie une promesse qui se résout avec un ArrayBuffer.

    La méthode arrayBuffer() est utile lorsque vous travaillez avec des données binaires telles que des images, des fichiers audio ou tout autre fichier binaire qui doit être traité.

    Tableau 3. Paramètres
    Nom Type Description
    Aucun
    Tableau 4. Renvoie
    Type Description
    Objet Promesse qui se résout par un ArrayBuffer, qui représente un tampon de données binaires brutes générique.
    Tableau 5. Exceptions
    Exception : Description
    DOMException : AbortError Une exception indiquant que la demande a été abandonnée.
    TypeError Lancé pour l’une des raisons suivantes :
    • Le corps de la réponse est perturbé ou verrouillé.
    • Une erreur s’est produite lors du décodage du contenu du corps (par exemple, parce que l’en-tête Content-Encoding est incorrect).
    RangeError Un problème est survenu lors de la création de l’ArrayBuffer associé. Par exemple, si la taille des données est trop grande.
    L’exemple de script suivant extrait les données binaires d’un serveur et les traite en utilisant la méthode arrayBuffer() en suivant les étapes suivantes :
    1. fetch() : Récupère une ressource à partir de l’URL spécifiée.
    2. response.ok: vérifie si l’état de la réponse est compris entre 200 et 299.
    3. arrayBuffer() : lit le corps de la réponse et le convertit en ArrayBuffer, qui représente un tampon de données binaires brutes générique de longueur fixe.
    4. Uint8Array : Convertit ArrayBuffer en Uint8Array, qui est un tableau typé pour faciliter la manipulation des données binaires.
    javascriptCopy code// Simple API to fetch binary data and process it using arrayBuffer()asyncfunctionfetchBinaryData(url) {
  try {
    // Fetch the resource from the provided URLconst response = awaitfetch(url);

    // Check if the response is successfulif (!response.ok) {
      thrownewError(`HTTP error! Status: ${response.status}`);
    }

    // Convert the response body to an ArrayBufferconst arrayBuffer = await response.arrayBuffer();

    // Process the ArrayBuffer (e.g., convert it to a typed array)const uint8Array = newUint8Array(arrayBuffer);

    // Return the processed datareturn uint8Array;
  } catch (error) {
    console.error("Error fetching or processing binary data:", error);
    throw error;
  }
}

// Example usageconst binaryDataUrl = 'https://example.com/path/to/binary/data';

fetchBinaryData(binaryDataUrl)
  .then((data) => {
    console.log("Binary data as Uint8Array:", data);
    // Further processing can be done here, e.g., rendering an image or playing audio
  })
  .catch((error) => {
    console.error("Failed to fetch binary data:", error);
  });

    Récupérer la réponse : blob()

    Renvoie une promesse qui se résout par un objet blob.

    Tableau 6. Paramètres
    Nom Type Description
    Aucun
    Tableau 7. Renvoie
    Type Description
    Objet Une promesse qui se résout avec un blob.
    Tableau 8. Exceptions
    Exception : Description
    DOMException : AbortError Une exception indiquant que la demande a été abandonnée.
    TypeError Lancé pour l’une des raisons suivantes :
    • Le corps de la réponse est perturbé ou verrouillé.
    • Une erreur s’est produite lors du décodage du contenu du corps (par exemple, parce que l’en-tête Content-Encoding est incorrect).
    L’exemple suivant montre comment utiliser la méthode blob() avec l’API Fetch en suivant les étapes suivantes. Ce cas d’utilisation est idéal pour extraire des images ou d’autres contenus binaires (comme des vidéos ou des PDF) et les afficher dynamiquement.
    1. fetch(url) : Récupère une ressource à partir de l’URL spécifiée.
    2. response.blob() : convertit le corps de la réponse en objet blob, qui représente les données binaires.
    3. URL.createObjectURL(blob) : génère une URL temporaire pour l’objet blob, qui peut être utilisée dans le DOM (par exemple, comme source d’image).
    4. Ajout de l’image au DOM : crée dynamiquement un élément image, définit l’URL de l’objet blob comme source et l’ajoute au corps du document.
    
async function fetchBlob(url) {
  try {
    // Fetch the resource from the provided URL
    const response = await fetch(url);

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

    // Convert the response body to a Blob
    const blob = await response.blob();

    // Create a URL for the Blob and log it
    const blobUrl = URL.createObjectURL(blob);
    console.log("Blob URL:", blobUrl);

    // For example, you can set it as the source of an image
    const img = document.createElement('img');
    img.src = blobUrl;
    img.alt = "Fetched Blob Image";
    document.body.appendChild(img);
  } catch (error) {
    console.error("Error fetching or processing blob:", error);
  }
}

// Example usage with an image URL
const imageUrl = 'https://via.placeholder.com/150';
fetchBlob(imageUrl);

    Récupérer la réponse : bytes()

    Renvoie une promesse qui se résout avec un Uint8Array.

    Tableau 9. Paramètres
    Nom Type Description
    Aucun
    Tableau 10. Renvoie
    Type Description
    Objet Une promesse qui se résout avec un Uint8Array.
    Tableau 11. Exceptions
    Exception : Description
    DOMException- AbortError La demande a été abandonnée.
    TypeError Lancé pour l’une des raisons suivantes :
    • Le corps de la réponse est perturbé ou verrouillé.
    • Une erreur s’est produite lors du décodage du contenu du corps (par exemple, parce que l’en-tête Content-Encoding est incorrect).
    RangeError Un problème est survenu lors de la création de l’ArrayBuffer associé. Par exemple, si la taille des données est trop grande.

    L’exemple suivant montre comment extraire un fichier texte, renvoyer le corps en tant que Uint8Array, puis le décoder en une chaîne.

    const response = await fetch("https://www.example.com/textfile.txt");
const textFile = await response.bytes();
const string = new TextDecoder().decode(textFile);
console.log(string);

    Récupérer la réponse : formData()

    Renvoie une promesse qui se résout avec un objet FormData.

    Tableau 12. Paramètres
    Nom Type Description
    Aucun
    Tableau 13. Renvoie
    Type Description
    Objet Promesse qui se résout avec un objet FormData .
    Tableau 14. Exceptions
    Exception : Description
    DOMException- AbortError La demande a été abandonnée.
    TypeError Lancé pour l’une des raisons suivantes :
    • Le corps de la réponse est perturbé ou verrouillé.
    • Une erreur s’est produite lors du décodage du contenu du corps (par exemple, parce que l’en-tête Content-Encoding est incorrect).
    L’exemple suivant montre comment utiliser formData() pour traiter une réponse de soumission de formulaire en suivant les étapes suivantes :
    1. Corps de la demande : Utilisation de JSON.stringify() pour envoyer les données du formulaire au format JSON au lieu de paramètres encodés en URL.
    2. Type de contenu : défini sur application/json pour indiquer le format du corps de la demande.
    // Example of using Response.formData()
async function fetchFormData(url) {
  try {
    // Make a POST request to fetch the form data
    const response = await fetch(url, {
      method: 'POST',
      body: JSON.stringify({
        name: 'John Doe',
        email: 'john.doe@example.com',
      }),
      headers: {
        'Content-Type': 'application/json',
      },
    });

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

    // Parse the response as FormData
    const formData = await response.formData();

    // Iterate through the FormData entries
    for (const [key, value] of formData.entries()) {
      console.log(`${key}: ${value}`);
    }
  } catch (error) {
    console.error("Error fetching or processing form data:", error);
  }
}

// Example usage
const formEndpoint = 'https://httpbin.org/post'; // Replace with your form endpoint
fetchFormData(formEndpoint);

    Sortie :

    name: John Doe
email: john.doe@example.com

    Récupérer la réponse : json()

    Renvoie une promesse qui se résout en résultat de l’analyse du corps de texte au format JSON.

    Remarque :
    Malgré le nom de cette méthode, le résultat de json() n’est pas JSON mais est plutôt le résultat de la prise de JSON comme entrée et de son analyse pour produire un objet JavaScript.
    Tableau 15. Paramètres
    Nom Type Description
    Aucun
    Tableau 16. Renvoie
    Type Description
    Objet Une promesse qui se résout en un objet JavaScript. Cet objet peut être tout ce qui peut être représenté par JSON, comme un objet, un tableau, une chaîne, un nombre, etc.
    Tableau 17. Exceptions
    Exception : Description
    DOMException- AbortError La demande a été abandonnée.
    TypeError Lancé pour l’une des raisons suivantes :
    • Le corps de la réponse est perturbé ou verrouillé.
    • Une erreur s’est produite lors du décodage du contenu du corps (par exemple, parce que l’en-tête Content-Encoding est incorrect).
    Erreur de syntaxe Le corps de la réponse ne peut pas être analysé en JSON.
    L’exemple suivant montre comment utiliser json() pour former une réponse :
    1. fetch() fait une requête GET à l’URL.
    2. Vérifie response.ok si la demande a abouti (code d’état 200 à 299).
    3. En cas de succès, response.json() est appelé pour analyser les données JSON à partir de la réponse.
    4. Les données analysées sont journalisées dans les journaux système à l’aide de l’API de la console . Si une erreur se produit pendant la demande ou l’analyse, elle est interceptée et consignée.
    fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

    Récupérer la réponse : text()

    Lit le corps de la réponse et le renvoie sous forme de chaîne brute. La réponse est toujours décodée à l’aide de l’UTF-8.

    La méthode text() est utile pour les réponses qui contiennent des données textuelles, telles que les fichiers HTML, JSON (si vous souhaitez les gérer manuellement), XML ou texte brut qui sont destinés à être traités comme des chaînes brutes.

    Tableau 18. Paramètres
    Nom Type Description
    Aucun
    Tableau 19. Renvoie
    Type Description
    Néant Une promesse qui se résout avec une chaîne de caractères UTF-8.
    Tableau 20. Exceptions
    Exception : Description
    DOMException- AbortError La demande a été abandonnée.
    TypeError Lancé pour l’une des raisons suivantes :
    • Le corps de la réponse est perturbé ou verrouillé.
    • Une erreur s’est produite lors du décodage du contenu du corps (par exemple, parce que l’en-tête Content-Encoding est incorrect).

    L’exemple suivant montre comment une façon simple d’utiliser text() lorsque le serveur renvoie du texte brut, comme Hello, world ! Il s’agit d’un exemple de réponse.

    const response = awaitfetch('https://example.com/text-endpoint');
const text = await response.text();
console.log(text); // Outputs: Hello, world! This is a sample response.

    Sortie :

    Hello, world! This is a sample response.