WritableStream.WritableStream()

在此页

句法
范例
规范
浏览器兼容性
相关话题

草案
此页面不完整。

这是实验性技术
检查浏览器兼容性表格要小心谨慎在生产中使用这之前。

WritableStream() 构造函数创建新 WritableStream 对象实例。

句法

var writableStream = new WritableStream(underlyingSink[, queuingStrategy]);

参数

underlyingSink

An object containing methods and properties that define how the constructed stream instance will behave.


								underlyingSink

can contain the following:

start(controller) 可选: This is a method, called immediately when the object is constructed. The contents of this method are defined by the developer, and should aim to get access to the underlying sink. If this process is to be done asynchronously, it can return a promise to signal success or failure. The controller parameter passed to this method is a WritableStreamDefaultController . This can be used by the developer to control the stream during set up.
write(chunk, controller) 可选: This method, also defined by the developer, will be called when a new chunk of data (specified in the chunk parameter) is ready to be written to the underlying sink. It can return a promise to signal success or failure of the write operation. The controller parameter passed to this method is a WritableStreamDefaultController that can be used by the developer to control the stream as more chunks are submitted for writing. This method will be called only after previous writes have succeeded, and never after the stream is closed or aborted (see below).
close(controller) 可选: This method, also defined by the developer, will be called if the app signals that it has finished writing chunks to the stream. The contents should do whatever is necessary to finalize writes to the underlying sink, and release access to it. If this process is asynchronous, it can return a promise to signal success or failure. This method will be called only after all queued-up writes have succeeded. The controller parameter passed to this method is a WritableStreamDefaultController , which can be used to control the stream at the end of writing.
abort(reason) 可选: This method, also defined by the developer, will be called if the app signals that it wishes to abruptly close the stream and put it in an errored state. It can clean up any held resources, much like close() ，但 abort() will be called even if writes are queued up — those chunks will be thrown away. If this process is asynchronous, it can return a promise to signal success or failure. The reason parameter contains a DOMString describing why the stream was aborted.

queuingStrategy 可选

An object that optionally defines a queuing strategy for the stream. This takes two parameters:

highWaterMark
size(chunk): A method containing a parameter chunk — this indicates the size to use for each chunk, in bytes.

注意 : You could define your own custom queuingStrategy , or use an instance of ByteLengthQueuingStrategy or CountQueuingStrategy for this object value. If no queuingStrategy is supplied, the default used is the same as a CountQueuingStrategy with a high water mark of 1.

返回值

An instance of the WritableStream 对象。

范例

The following example illustrates several features of this interface. It shows the creation of the WritableStream with a custom sink and an API-supplied queuing strategy. It then calls a function called sendMessage() , passing the newly created stream and a string. Inside this function it calls the stream's getWriter() method, which returns an instance of WritableStreamDefaultWriter 。 forEach() call is used to write each chunk of the string to the stream. Finally, write() and close() return promises that are processed to deal with success or failure of chunks and streams.

const list = document.querySelector('ul');
function sendMessage(message, writableStream) {
  // defaultWriter is of type WritableStreamDefaultWriter
  const defaultWriter = writableStream.getWriter();
  const encoder = new TextEncoder();
  const encoded = encoder.encode(message, { stream: true });
  encoded.forEach((chunk) => {
    defaultWriter.ready
      .then(() => {
        return defaultWriter.write(chunk);
      })
      .then(() => {
        console.log("Chunk written to sink.");
      })
      .catch((err) => {
        console.log("Chunk error:", err);
      });
  });
  // Call ready again to ensure that all chunks are written
  //   before closing the writer.
  defaultWriter.ready
    .then(() => {
      defaultWriter.close();
    })
    .then(() => {
      console.log("All chunks written");
    })
    .catch((err) => {
      console.log("Stream error:", err);
    });
}
const decoder = new TextDecoder("utf-8");
const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
let result = "";
const writableStream = new WritableStream({
  // Implement the sink
  write(chunk) {
    return new Promise((resolve, reject) => {
      var buffer = new ArrayBuffer(2);
      var view = new Uint16Array(buffer);
      view[0] = chunk;
      var decoded = decoder.decode(view, { stream: true });
      var listItem = document.createElement('li');
      listItem.textContent = "Chunk decoded: " + decoded;
      list.appendChild(listItem);
      result += decoded;
      resolve();
    });
  },
  close() {
    var listItem = document.createElement('li');
    listItem.textContent = "[MESSAGE RECEIVED] " + result;
    list.appendChild(listItem);
  },
  abort(err) {
    console.log("Sink error:", err);
  }
}, queuingStrategy);
sendMessage("Hello, world.", writableStream);

You can find the full code in our Simple writer example .

Backpressure

Because of how backpressure is supported in the API, its implementation in code may be less than obvious. To see how backpressure is implemented look for three things.

highWaterMark property, which is set when creating the counting strategy (line 35), sets the maximum amount of data that the WritableStream instance will handle in a single write() operation. In this example, it's the maximum amount of data that can be sent to defaultWriter.write() (line 11).
defaultWriter.ready property returns a promise that resolves when the sink (the first property of the WritableStream constructor) is done writing data. The data source can wither write more data (line 11) or call close() (line 24). Calling close() too early can prevent data from being written. This is why the example calls defaultWriter.ready twice (lines 9 and 22).
Promise returned by the sink's write() method (line 40) tells the WritableStream and its writer when to resolve defaultWriter.ready .

规范

规范	状态	注释
流 The definition of 'WritableStream()' in that specification.	实时标准	初始定义。

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`WritableStream()` 构造函数	Chrome 59	Edge 16	Firefox No	IE No	Opera 47	Safari ?	WebView Android 59	Chrome Android 59	Firefox Android No	Opera Android 44	Safari iOS ?	Samsung Internet Android 7.0

图例

完整支持
不支持
兼容性未知 ?
实验。期望将来行为有所改变。

元数据

最后修改： Feb 25, 2020

在此页

句法

参数

返回值

范例

Backpressure

规范

浏览器兼容性

图例

相关话题