WritableStreamDefaultController: signal プロパティ

signalWritableStreamDefaultController インターフェイスの読み取り専用プロパティで、このコントローラーに関連付けられた AbortSignal を返します。

AbortSignal オブジェクトです。

長い書き込み操作の中止

この例では、ローカルシンクを使用して低速処理をシミュレーションします。データが書き込まれたら何もしませんが、少し待ちます。これにより、 writer.abort() メソッドを呼び出してプロミスを即座に拒否するのに十分な時間が得られます。

js
const writingStream = new WritableStream({
  // 長い処理をシミュレーションするために、低速ローカルシンクを定義します。
  write(controller) {
    return new Promise((resolve, reject) => {
      controller.signal.addEventListener("abort", () =>
        reject(controller.signal.reason),
      );

      // 何もせずにローカルシンクのデータで待ちます。
      setTimeout(resolve, 1000); // 低速処理をシミュレーションするタイムアウト
    });
  },
});

// 書き込みを実行
const writer = writingStream.getWriter();
writer.write("Lorem ipsum test data");

// 手動で書き込みを中止
await writer.abort("Manual abort!");

AbortSignal を下層レイヤーへ移譲

この例では、フェッチ API を使用して、実際にメッセージをサーバーに送信しています。フェッチ API は AbortSignal にも対応しています。 fetch メソッドと WritableStreamDefaultController の両方に同じオブジェクトを使用することが可能です。

js
const endpoint = "https://www.example.com/api"; // デモ用の架空の URL
const writingStream = new WritableStream({
  async write(chunk, controller) {
    // Write to the server using the Fetch API
    const response = await fetch(endpoint, {
      signal: controller.signal, // fetch と controller の両方で同じオブジェクトを使用
      method: "POST",
      body: chunk,
    });
    await response.text();
  },
});

// 書き込みを実行
const writer = writingStream.getWriter();
writer.write("Lorem ipsum test data");

// 手動で書き込みを中止
await writer.abort("Manual abort!");

仕様書

Specification
Streams
# ref-for-ws-default-controller-signal①

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
signal

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support