Response : propriété body
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 janvier 2019.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
Note : Cette fonctionnalité est disponible via les Web Workers.
La propriété en lecture seule body de l'interface Response est un objet ReadableStream contenant le corps de la réponse.
Valeur
Un ReadableStream, ou null pour tout objet Response créé avec une propriété body nulle, ou pour toute réponse HTTP réelle qui n'a pas de corps.
Le flux est un flux d'octets lisible, qui prend en charge la lecture sans copie à l'aide d'un ReadableStreamBYOBReader.
Note :
Les navigateurs actuels ne respectent pas réellement l'exigence de la spécification qui impose de définir la propriété body à null pour les réponses sans corps (par exemple, les réponses aux requêtes HEAD ou les réponses 204 No Content).
Exemples
Copier une image
Dans notre exemple de transfert de flux simple (angl.), nous récupérons une image, exposons le flux de la réponse avec response.body, créons un lecteur avec ReadableStream.getReader(), puis nous ajoutons les morceaux de ce flux dans un second flux lisible personnalisé — créant ainsi une copie identique de l'image.
const image = document.getElementById("target");
// Récupérer l'image d'origine
fetch("./tortoise.png")
// Récupérer son corps comme ReadableStream
.then((reponse) => reponse.body)
.then((corps) => {
const lecteur = corps.getReader();
return new ReadableStream({
start(controleur) {
return pomper();
function pomper() {
return lecteur.read().then(({ done, value }) => {
// Lorsqu'il n'y a plus de données à consommer, fermer le flux
if (done) {
controleur.close();
return;
}
// Ajouter le prochain morceau de données dans notre flux cible
controleur.enqueue(value);
return pomper();
});
}
},
});
})
.then((flux) => new Response(flux))
.then((reponse) => reponse.blob())
.then((blob) => URL.createObjectURL(blob))
.then((url) => console.log((image.src = url)))
.catch((err) => console.error(err));
Créer un lecteur BYOB
Dans cet exemple, nous construisons un ReadableStreamBYOBReader à partir du corps en utilisant ReadableStream.getReader({mode: 'byob'}). Nous pouvons alors utiliser ce lecteur pour mettre en œuvre un transfert sans copie des données de la réponse.
async function obtenirProduits(url) {
const reponse = await fetch(url);
const lecteur = reponse.body.getReader({ mode: "byob" });
// lire la réponse
}
obtenirProduits(
"https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);
Spécifications
| Specification |
|---|
| Fetch # ref-for-dom-body-body① |