Fetch: Multiple clones not working

[NekR]

This code fails in Safari 10.1 on El Capitan:

fetch('/').then(function(a) {
  var c1 = a.clone();
  var c2 = a.clone();

  c2.text().then(function(z) {
    console.log(z)
  }, function(x) {
    console.error(x)
  });
});

The promise log data never fulfills. Try running this code in Chrome directly on this issue page in console and then in Safari. Chrome -- resolves, Safari -- don't.

Also it isn't related which response is used in that situation, cloned or not. Just the matter of 2 clones prevents it from working.

[NekR]

Changing code to this makes it work:

fetch('/').then(function(a) {
  var c1 = a.clone();
  var c2 = a.clone();

  c1.text();
  c2.text().then(function(z) {
    console.log(z)
  }, function(x) {
    console.error(x)
  });
});

[NekR]

This also works:

fetch('/').then(function(a) {
  var c1 = a.clone();
  var c2 = a.clone();

  a.clone().text();

  c2.text().then(function(z) {
    console.log(z)
  }, function(x) {
    console.error(x)
  });
});

[NekR]

Turns out Safari 10.1 has fetch, it's their bug. Sorry.

[youennf]

Hi NekR,
Have you tried on Safari Tech Preview?
If you can confirm this is a bug in Safari 10.1, would you be able to file a bug in https://bugs.webkit.org?

[NekR]

@youennf I'm on El Capitan so do not have access to the latest STP. It would be better if someone with it could perform the testing.

[Amareis]

Multiple response clones don't work in latest Safari (11.0) in some cases, throwing error "Cannot clone a disturbed Response", but works in latest STP (11.1). If you impact in this, you can force enable polyfill, it solves the issue.

[domenic]

If someone wants to do a big service to the community, perhaps browse https://github.com/w3c/web-platform-tests/tree/master/fetch/api to see if this case is already tested, and if it's not, add such a test. That will ensure it doesn't regress in the future, in any browser.

[ThaDilz]

In case you, like me, run into a situation where you need to support multiple fetch response clones on Safari < 11, I discovered that once the response is cloned, the clone itself can be cloned any number of times without throwing "Cannot clone a disturbed Response".

For example, the following fails because the response itself is cloned twice:

fetch('/').then(function(r) {
  try {
    r.clone().text().then(function(t) { console.log(t); }, function(e) { console.error(e) });
    r.clone().text().then(function(t) { console.log(t); }, function(e) { console.error(e) });
  } catch (e) {
    console.error(e);
  }
});

But cloning a clone twice succeeds:

fetch('/').then(function(r) {
  try { 
    var c = r.clone();
    c.clone().text().then(function(t) { console.log(t); }, function(e) { console.error(e) });
    c.clone().text().then(function(t) { console.log(t); }, function(e) { console.error(e) });
  } catch (e) {
    console.error(e);
  }
});