WritableStream：close() 方法

Baseline 已廣泛支援

此功能已成熟，並可在許多裝置和瀏覽器版本上使用。自 2022 年 5 月以來，它已在各個瀏覽器中可用。

注意：此功能在 Web Workers 中可用。

WritableStream 介面的 close() 方法關閉關聯的流。在此方法呼叫之前寫入的所有塊都將在返回的 Promise 履行之前傳送。

這等同於使用 getWriter() 獲取 WritableStreamDefaultWriter，然後呼叫其 close() 方法。

語法

close()

返回值

如果所有剩餘塊在關閉之前成功寫入，則 Promise 履行並返回 undefined；如果在過程中遇到問題，則 Promise 拒絕並返回一個錯誤。

以下示例展示了 WritableStream 的幾個特性。它展示了使用自定義接收器和 API 提供的排隊策略建立 WritableStream。然後它呼叫一個名為 sendMessage() 的函式，傳入新建立的流和一個字串。在這個函式內部，它呼叫流的 getWriter() 方法，該方法返回一個 WritableStreamDefaultWriter 例項。使用 forEach() 呼叫將字串的每個塊寫入流中。最後，write() 和 close() 返回 Promise，這些 Promise 用於處理塊和流的成功或失敗。請注意，為了能夠在流本身上呼叫 close()，必須使用 defaultWriter.releaseLock(); 斷開寫入器。

<ul id="log"></ul>

const list = document.getElementById("log");
function log(message) {
  const listItem = document.createElement("li");
  listItem.textContent = message;
  list.appendChild(listItem);
}

function sendMessage(message, writableStream) {
  // defaultWriter is of type WritableStreamDefaultWriter
  const defaultWriter = writableStream.getWriter();
  const encoder = new TextEncoder();
  const encoded = encoder.encode(message);
  encoded.forEach((chunk) => {
    defaultWriter.ready
      .then(() => {
        defaultWriter.write(chunk);
      })
      .catch((err) => {
        log("Chunk error:", err);
      });
  });

  // Call ready again to ensure that all chunks are written
  //   before closing the writer.
  defaultWriter.ready
    .then(() => {
      defaultWriter.releaseLock();
      writableStream.close();
    })
    .then(() => {
      log("All chunks written / stream closed.");
    })
    .catch((err) => {
      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) => {
        const buffer = new ArrayBuffer(1);
        const view = new Uint8Array(buffer);
        view[0] = chunk;
        const decoded = decoder.decode(view, { stream: true });
        const listItem = document.createElement("li");
        result += decoded;
        resolve();
      });
    },
    close() {
      const listItem = document.createElement("li");
      log(`[MESSAGE RECEIVED] ${result}`);
    },
    abort(err) {
      log("Sink error:", err);
    },
  },
  queuingStrategy,
);

log("Sending 'Hello, world.' message.");
sendMessage("Hello, world.", writableStream);