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.bodyLecture seule-
Un objet
ReadableStreamcontenant le corps de la réponse. Response.bodyUsedLecture seule-
Contient un booléen indiquant si le corps a déjà été utilisé dans une réponse.
Response.headersLecture seule-
L'objet
Headersassocié à la réponse. Response.okLecture seule-
Un booléen indiquant si la réponse a réussi (statut dans la plage
200à299) ou non. Response.redirectedLecture 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.statusLecture seule-
Le code d'état de la réponse. (Ce sera
200en cas de succès). Response.statusTextLecture seule-
Le message d'état correspondant au code d'état. (par exemple,
OKpour200). Response.typeLecture seule-
Le type de la réponse (par exemple,
basic,cors). Response.urlLecture seule-
L'URL de la réponse.
Méthodes statiques
Response.error()-
Retourne un nouvel objet
Responseassocié à une erreur réseau. Response.redirect()-
Retourne une nouvelle réponse avec une URL différente.
Response.json()-
Retourne un nouvel objet
Responsepermettant 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.
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é :
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.
// 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
- L'API ServiceWorker
- Contrôle d'accès HTTP (CORS)
- La référence HTTP