ReadableStream: phương thức pipeThrough()

Baseline Widely available

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

Note: This feature is available in Web Workers.

Phương thức pipeThrough() của giao diện ReadableStream cung cấp một cách có thể nối chuỗi để dẫ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.

Việc truyền một luồng nói chung sẽ khóa luồng đó trong suốt thời gian của luồng, ngăn không cho các trình đọc khác khóa luồng đó.

A TransformStream (or an object with the structure {có thể ghi, có thể đọc được_) consisting of a readable stream and a writable stream working together to transform some data from one form to another. Data written to the writable stream can be read in some transformed state by the readable stream. For example, a TextDecoder, has bytes written to it and strings read from it, while a video decoder has encoded bytes written to it and uncompressed video frames read from it.

options Optional

The options that should be used when piping to the writable stream. Available options are:

preventClose
- : If this is set to true, closing the source ReadableSt ream will no longer cause the destination WritableStream to be closed.
preventAbort
- : If this is set to true, errors in the source ReadableStream will no longer abort the destination WritableStream.
ngăn chặnHủy__ MDNPH27__true, errors in the destination WritableStream will no longer cancel the source ReadableStream.
signal
- : If set to an AbortSignal object, ongoing pipe operations can then be aborted via the corresponding AbortController.

Return value

The readable side of the transformStream.

Exceptions

TypeError: Thrown if the writable and/or readable property of transformStream are undefined.

Examples

In the following example (see Unpack chunks of a PNG for the full code running live, and png-transform-stream for the source code), an image is fetched and its body retrieved as a ReadableStream.

Next, we log the contents of the readable stream, use pipeThrough() to send it to a new function that creates a gray-scaled version of the stream, then log the new stream's contents too.

// Fetch the original image
fetch("png-logo.png")
  // Retrieve its body as ReadableStream
  .then((response) => response.body)
  .then((rs) => logReadableStream("Fetch Response Stream", rs))
  // Create a gray-scaled PNG stream out of the original
  .then((body) => body.pipeThrough(new PNGTransformStream()))
  .then((rs) => logReadableStream("PNG Chunk Stream", rs));