Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Response

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2017.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

Note : Cette fonctionnalité est disponible via les Web Workers.

L'interface Response de l'API Fetch représente la réponse à une requête.

Vous pouvez créer un nouvel objet Response à l'aide du constructeur Response(), mais vous rencontrerez plus souvent un objet Response retourné à la suite d'une autre opération d'API — par exemple, un service worker FetchEvent.respondWith, ou un simple fetch().

Constructeur

Response()

Crée un nouvel objet Response.

Propriétés d'instance

Response.body Lecture seule

Un objet ReadableStream contenant le corps de la réponse.

Response.bodyUsed Lecture seule

Contient un booléen indiquant si le corps a déjà été utilisé dans une réponse.

Response.headers Lecture seule

L'objet Headers associé à la réponse.

Response.ok Lecture seule

Un booléen indiquant si la réponse a réussi (statut dans la plage 200 à 299) ou non.

Response.redirected Lecture seule

Indique si la réponse résulte d'une redirection (c'est-à-dire si sa liste d'URL comporte plus d'une entrée).

Response.status Lecture seule

Le code d'état de la réponse. (Ce sera 200 en cas de succès).

Response.statusText Lecture seule

Le message d'état correspondant au code d'état. (par exemple, OK pour 200).

Response.type Lecture seule

Le type de la réponse (par exemple, basic, cors).

Response.url Lecture seule

L'URL de la réponse.

Méthodes statiques

Response.error()

Retourne un nouvel objet Response associé à une erreur réseau.

Response.redirect()

Retourne une nouvelle réponse avec une URL différente.

Response.json()

Retourne un nouvel objet Response permettant de retourner les données JSON encodées fournies.

Méthodes d'instance

Response.arrayBuffer()

Retourne une promesse qui est résolue avec une représentation du corps de la réponse sous forme d'un objet ArrayBuffer.

Response.blob()

Retourne une promesse qui est résolue avec une représentation du corps de la réponse sous forme d'un objet Blob.

Response.bytes()

Retourne une promesse qui est résolue avec une représentation du corps de la réponse sous forme d'un objet Uint8Array.

Response.clone()

Crée un clone d'un objet Response.

Response.formData()

Retourne une promesse qui est résolue avec une représentation du corps de la réponse sous forme d'un objet FormData.

Response.json()

Retourne une promesse qui est résolue avec le résultat de l'analyse du texte du corps de la réponse comme du JSON.

Response.text()

Retourne une promesse qui est résolue avec une représentation textuelle du corps de la réponse.

Exemples

Récupérer une image

Dans notre exemple basique sur la récupération (angl.) (voir l'exemple en direct (angl.)), nous utilisons un simple appel à la fonction fetch() pour obtenir une image et l'afficher dans un élément HTML <img>. L'appel fetch() retourne une promesse, qui est résolue avec l'objet Response associé à l'opération de récupération de la ressource.

Vous remarquerez que, puisque nous demandons une image, nous devons utiliser Response.blob pour donner à la réponse son type MIME correct.

js
const image = document.querySelector(".mon-image");
fetch("fleurs.jpg")
  .then((reponse) => {
    if (!reponse.ok) {
      throw new Error(`Erreur HTTP ! statut : ${reponse.status}`);
    }
    return reponse.blob();
  })
  .then((blob) => {
    const urlObjet = URL.createObjectURL(blob);
    image.src = urlObjet;
  })
  .catch((erreur) => {
    console.error("Erreur de récupération de l'image :", erreur);
  });

Vous pouvez également utiliser le constructeur Response() pour créer votre propre objet Response personnalisé :

js
const reponse = new Response();

Appel à un fichier PHP

Ici, nous appelons un fichier programme PHP qui génère une chaîne JSON, affichant le résultat en tant que valeur JSON.

js
// Fonction pour récupérer du JSON en utilisant PHP
const getJSON = async () => {
  // Générer l'objet Response
  const reponse = await fetch("getJSON.php");
  if (reponse.ok) {
    // Obtenir la valeur JSON à partir du corps de la réponse
    return reponse.json();
  }
  throw new Error("*** Fichier PHP introuvable");
};

// Appeler la fonction et afficher la valeur ou le message d'erreur dans la console
getJSON()
  .then((resultat) => console.log(resultat))
  .catch((erreur) => console.error(erreur));

Spécifications

Specification
Fetch
# response-class

Compatibilité des navigateurs

Voir aussi