2.5 Response.clone()

Stream 对象只能读取一次,读取完就没了。这意味着,前一节的五个读取方法,只能使用一个,否则会报错。

  1. let text = await response.text();
  2. let json = await response.json(); // 报错

上面示例先使用了response.text(),就把 Stream 读完了。后面再调用response.json(),就没有内容可读了,所以报错。

Response 对象提供Response.clone()方法,创建Response对象的副本,实现多次读取。

  1. const response1 = await fetch('flowers.jpg');
  2. const response2 = response1.clone();
  3. const myBlob1 = await response1.blob();
  4. const myBlob2 = await response2.blob();
  5. image1.src = URL.createObjectURL(myBlob1);
  6. image2.src = URL.createObjectURL(myBlob2);

上面示例中,response.clone()复制了一份 Response 对象,然后将同一张图片读取了两次。

Response 对象还有一个Response.redirect()方法,用于将 Response 结果重定向到指定的 URL。该方法一般只用在 Service Worker 里面,这里就不介绍了。