ReadableStream

Trình xây dựng

ReadableStream()

Tạo và trả về một đối tượng luồng có thể đọc được từ các trình xử lý đã cho.

Thuộc tính phiên bản

ReadableStream.locked Read only

Trả về một boolean cho biết luồng có thể đọc được có bị khóa đối với trình đọc hay không.

Phương thức tĩnh

ReadableStream.from() Experimental

Trả về ReadableStream từ một đối tượng có thể lặp hoặc không đồng bộ được cung cấp, chẳng hạn như một mảng, một tập hợp, một trình tạo không đồng bộ, v.v.

Các phương thức thực thể

ReadableStream.cancel()

Trả về Promise giải quyết khi luồng bị hủy. Việc gọi phương thức này báo hiệu người tiêu dùng mất hứng thú với luồng. Đối số reason được cung cấp sẽ được cấp cho nguồn cơ bản, nguồn này có thể sử dụng hoặc không sử dụng nó.

ReadableStream.getReader()

Tạo một trình đọc và khóa luồng vào nó. Trong khi luồng bị khóa, không thể lấy được trình đọc nào khác cho đến khi luồng này được phát hành.

ReadableStream.pipeThrough()

Cung cấp một cách có thể nối chuỗi để truyền luồng hiện tại thông qua luồng biến đổi hoặc bất kỳ cặp có thể ghi/đọc được nào khác.

ReadableStream.pipeTo()

Chuyển ReadableStream hiện tại sang WritableStream nhất định và trả về Promise đáp ứng khi quá trình tạo đường dẫn hoàn tất thành công hoặc từ chối nếu gặp bất kỳ lỗi nào.

ReadableStream.tee()

Phương thức tee tees luồng có thể đọc được này, trả về một mảng hai phần tử chứa hai nhánh kết quả dưới dạng phiên bản ReadableStream mới. Mỗi luồng đó nhận được cùng một dữ liệu đến.

Lặp lại không đồng bộ

ReadableStream triển khai giao thức lặp không đồng bộ. Điều này cho phép lặp lại không đồng bộ trên các đoạn trong luồng bằng cú pháp for await...of :

const stream = new ReadableStream(getSomeSource());

for await (const chunk of stream) {
  // Do something with each 'chunk'
}

The async iterator consumes the stream until it runs out of data or otherwise terminates. The loop can also exit early due to a break, throw, or return statement.

While iterating, the stream is locked to prevent other consumers from acquiring a reader (attempting to iterate over a stream that is already locked will throw a TypeError). This lock is released when the loop exits.

By default, exiting the loop will also cancel the stream, so that it can no longer be used. To continue to use a stream after exiting the loop, pass { preventCancel: true } to the stream'svalues()` method:

for await (const chunk of stream.values({ preventCancel: true })) {
  // Do something with 'chunk'
  break;
}
// Acquire a reader for the stream and continue reading ...

Examples

Fetch stream

In the following example, an artificial Response is created to stream HTML fragments fetched from another resource to the browser.

It demonstrates the usage of a ReadableStream in combination with a Uint8Array.

fetch("https://www.example.org")
  .then((response) => response.body)
  .then((rb) => {
    const reader = rb.getReader();

    return new ReadableStream({
      start(controller) {
        // The following function handles each data chunk
        function push() {
          // "done" is a Boolean and value a "Uint8Array"
          reader.read().then(({ done, value }) => {
            // If there is no more data to read
            if (done) {
              console.log("done", done);
              controller.close();
              return;
            }
            // Get the data and send it to the browser via the controller
            controller.enqueue(value);
            // Check chunks by logging to the console
            console.log(done, value);
            push();
          });
        }

        push();
      },
    });
  })
  .then((stream) =>
    // Respond with our stream
    new Response(stream, { headers: { "Content-Type": "text/html" } }).text(),
  )
  .then((result) => {
    // Do things with result
    console.log(result);
  });

Convert an iterator or async iterator to a stream

The from() static method can convert an iterator, such as an Array or Map, or an (async) iterator to a readable stream:

const myReadableStream = ReadableStream.from(iteratorOrAsyncIterator);
``_ _MDNPH46__from()` method you can instead create your own [custom readable stream](/vi/docs/Web/API/Streams_API/Using_readable_streams#creating_your_own_custom_readable_stream) to achieve the same result:

```js
function iteratorToStream(iterator) {
  return new ReadableStream({
    async pull(controller) {
      const { value, done } = await iterator.next();

      if (value) {
        controller.enqueue(value);
      }
      if (done) {
        controller.close();
      }
    },
  });
}

Async iteration of a stream using for await...of

This example shows how you can process the fetch() response using a for await...of loop to iterate through the arriving chunks.

const response = await fetch("https://www.example.org");
let total = 0;

// Iterate response.body (a ReadableStream) asynchronously
for await (const chunk of response.body) {
  // Do something with each chunk
  // Here we just accumulate the size of the response.
  total += chunk.length;
}

// Do something with the total
console.log(total);

Thông số kỹ thuật

Khả năng tương thích của trình duyệt

Xem thêm

• Khái niệm API luồng
• Sử dụng các luồng có thể đọc được
• Sử dụng luồng byte có thể đọc được
• Web-streams-polyfill