ReadableStream: phương thức tee()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Note: This feature is available in Web Workers.
Phương pháp tee() của
ReadableStream giao diện tees luồng có thể đọc được hiện tại, trả về một
mảng hai phần tử chứa hai nhánh kết quả là
phiên bản ReadableStream mới.
Điều này rất hữu ích khi cho phép hai đầu đọc đọc một luồng tuần tự hoặc đồng thời, có lẽ ở tốc độ khác nhau. Ví dụ: bạn có thể thực hiện việc này trong ServiceWorker nếu bạn muốn tìm nạp một phản hồi từ máy chủ và truyền nó tới trình duyệt, nhưng cũng truyền nó tới Bộ nhớ đệm của ServiceWorker. Vì nội dung phản hồi không thể được sử dụng nhiều lần nên bạn cần hai bản sao để làm điều này.
Luồng teed sẽ báo hiệu một phần áp suất ngược theo tốc độ của người tiêu dùng faster
của hai nhánh ReadableStream,
và dữ liệu chưa đọc được xếp hàng nội bộ trên ReadableStream được tiêu thụ chậm hơn
không có bất kỳ giới hạn hoặc áp lực ngược.
Nghĩa là, khi các nhánh both có phần tử chưa đọc trong hàng đợi nội bộ của chúng,
thì hàng đợi nội bộ của bộ điều khiển ReadableStream ban đầu sẽ bắt đầu đầy,
và một khi desiredSize 0
hoặc bộ điều khiển luồng byte desiredSize 0,
thì bộ điều khiển sẽ ngừng gọi pull(controller) trên
nguồn cơ bản được chuyển đến ReadableStream().
Nếu chỉ tiêu thụ một nhánh thì toàn bộ cơ thể sẽ được ghi nhớ trong trí nhớ.
Do đó, bạn không nên sử dụng tee() tích hợp sẵn để đọc các luồng rất lớn
song song với tốc độ khác nhau.
Thay vào đó, hãy tìm kiếm một cách triển khai hoàn toàn gây áp lực ngược
theo tốc độ của nhánh tiêu thụ slow.
Để hủy luồng, bạn cần hủy cả hai nhánh kết quả. Phát một luồng nói chung sẽ khóa nó trong một thời gian, ngăn không cho người đọc khác khóa nó.
Cú pháp
tee()
Parameters
None.
Return value
An Array containing two ReadableStream instances.
Exceptions
TypeError-
Thrown if the source stream is not a
ReadableStream.
Examples
In the following simple example, a previously-created stream is teed, then both resulting streams (contained in two members of a generated array) are passed to a function that reads the data out of the two streams and prints each stream's chunks sequentially to a different part of the UI. See Simple tee example for the full code.
function teeStream() {
const teedOff = stream.tee();
fetchStream(teedOff[0], list2);
fetchStream(teedOff[1], list3);
}
function fetchStream(stream, list) {
const reader = stream.getReader();
let charsReceived = 0;
// read() returns a promise that resolves
// when a value has been received
reader.read().then(function processText({ done, value }) {
// Result objects contain two properties:
// done - true if the stream has already given you all its data.
// value - some data. Always undefined when done is true.
if (done) {
console.log("Stream complete");
return;
}
// value for fetch streams is a Uint8Array
charsReceived += value.length;
const chunk = value;
let listItem = document.createElement("li");
listItem.textContent = `Read ${charsReceived} ký tự cho đến nay. Đoạn hiện tại = ${chunk`;
list.appendChild(listItem);
// Read some more, and call this function again
return reader.read().then(processText);
});
}
Thông số kỹ thuật
| Specification |
|---|
| Streams # ref-for-rs-tee② |
Khả năng tương thích của trình duyệt
Xem thêm
-
hàm tạo
ReadableStream()