Response.clone()

The clone() method of the Response interface creates a clone of a response object, identical in every way, but stored in a different variable.

clone() throws a TypeError if the response Body has already been used. In fact, the main reason clone() exists is to allow multiple uses of Body objects (when they are one-use only.)

Syntax

var response2 = response1.clone();

Parameters

None.

Value

A Response object.

Example

In our Fetch Response clone example (see Fetch Response clone live) we create a new Request object using the Request() constructor, passing it a JPG path. We then fetch this request using fetch(). When the fetch resolves successfully, we clone it, extract a blob from both responses using two Body.blob calls, create object URLs out of the blobs using URL.createObjectURL, and display them in two separate <img> elements.

var image1 = document.querySelector('.img1');
var image2 = document.querySelector('.img2');

var myRequest = new Request('flowers.jpg');

fetch(myRequest).then(function(response) {
  var response2 = response.clone();

  response.blob().then(function(myBlob) {
    var objectURL = URL.createObjectURL(myBlob);
    image1.src = objectURL;
  });

  response2.blob().then(function(myBlob) {
    var objectURL = URL.createObjectURL(myBlob);
    image2.src = objectURL;
  });
});

Specifications

Browser compatibility

[1] This feature is implemented behind a preference.

See also

• ServiceWorker API
• HTTP access control (CORS)
• HTTP