Response : méthode clone()

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.

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

La méthode clone() de l'interface Response crée un clone d'un objet réponse, identique en tous points, mais stocké dans une variable différente.

Tout comme l'API sous-jacente ReadableStream.tee, le body d'une Response clonée signalera une contre-pression au rythme du consommateur le plus rapide des deux corps, et les données non lues seront mises en file d'attente en interne sur le body consommé le plus lentement, sans aucune limite ni contre-pression. La contre-pression désigne le mécanisme par lequel le consommateur de données en streaming (dans ce cas, le code qui lit le corps) ralentit le producteur de données (comme le serveur TCP) afin de ne pas charger de grandes quantités de données en mémoire en attente d'utilisation par l'application. Si une seule branche clonée est consommée, alors l'intégralité du corps sera mise en mémoire tampon. Ainsi, clone() permet de lire une réponse deux fois de suite, mais il ne faut pas l'utiliser pour lire de très grands corps en parallèle à des vitesses différentes.

clone() lève une TypeError si le corps de la réponse a déjà été utilisé. En fait, la principale raison d'être de clone() est de permettre plusieurs utilisations des objets corps (lorsqu'ils ne sont utilisables qu'une seule fois).

Syntaxe

clone()

Dans notre exemple de clonage de réponse Fetch ^(angl.) (voir le clonage de réponse Fetch en direct ^(angl.)), nous créons un nouvel objet Request à l'aide du constructeur Request(), auquel nous passons le chemin d'un fichier JPG. Nous récupérons ensuite cette requête avec fetch(). Lorsque la récupération réussit, nous la clonons, extrayons un blob des deux réponses à l'aide de deux appels à Response.blob, créons des URL d'objet à partir des blobs avec URL.createObjectURL(), et les affichons dans deux éléments <img> distincts.

const image1 = document.querySelector(".img1");
const image2 = document.querySelector(".img2");

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

fetch(maRequete).then((reponse) => {
  const reponse2 = reponse.clone();

  reponse.blob().then((monBlob) => {
    const urlObjet = URL.createObjectURL(monBlob);
    image1.src = urlObjet;
  });

  reponse2.blob().then((monBlob) => {
    const urlObjet = URL.createObjectURL(monBlob);
    image2.src = urlObjet;
  });
});