Response: phương thức clone()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Note: This feature is available in Web Workers.

Phương thức clone() của giao diện Response tạo một bản sao của đối tượng phản hồi, giống hệt về mọi mặt nhưng được lưu trong một biến khác.

Giống như API nền tảng ReadableStream.tee, body của một Response đã clone sẽ báo backpressure theo tốc độ của consumer nhanh hơn trong hai body, và dữ liệu chưa đọc sẽ được xếp hàng nội bộ trên body tiêu thụ chậm hơn mà không có giới hạn hay backpressure. Backpressure là cơ chế mà consumer luồng dữ liệu làm chậm producer dữ liệu để không nạp lượng lớn dữ liệu vào bộ nhớ khi ứng dụng chưa cần dùng. Nếu chỉ một nhánh đã clone được tiêu thụ, toàn bộ body sẽ bị đệm trong bộ nhớ. Vì vậy, clone() là một cách để đọc một phản hồi hai lần theo thứ tự, nhưng bạn không nên dùng nó để đọc các body rất lớn song song với tốc độ rất khác nhau.

clone() ném ra TypeError nếu body phản hồi đã được dùng rồi. Thực ra lý do chính của clone() là cho phép dùng nhiều lần các đối tượng body vốn chỉ dùng một lần.

Cú pháp

clone()

Trong ví dụ Fetch Response clone của chúng tôi (chạy trực tiếp), chúng ta tạo một đối tượng Request mới bằng constructor Request(), truyền vào một đường dẫn JPG. Sau đó chúng ta fetch yêu cầu này bằng fetch(). Khi fetch thành công, chúng ta clone nó, trích blob từ cả hai phản hồi bằng hai lời gọi Response.blob, tạo object URL từ các blob bằng URL.createObjectURL(), rồi hiển thị chúng trong hai phần tử <img> riêng biệt.

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

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

fetch(myRequest).then((response) => {
  const response2 = response.clone();

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

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