応答のフェッチ :スコープ対象、グローバル

  • リリースバージョン: Yokohama
  • 更新日 2025年01月30日
  • 所要時間：20分

    • Fetch Response API は、新しい Response オブジェクトを作成するためのメソッドと、Fetch Request API メソッドによって作成された応答本文を処理するためのメソッドを提供します。

    Fetch Response API は、外部 Web サイトからリソースをフェッチするためのさまざまなアクションを提供する一連の Fetch API の一部です。完全な Fetch API コレクションには、次のものが含まれます。

    フェッチアクションをサポートするために、システムプロパティ glide.hosts.allowlist では、fetch メソッドがアクセスできるホストを制御できます。これは、 RestMessageV2 や上記のような HTTP API に適用されます。glide.hosts.allowlist の詳細については、「Available system properties」を参照してください。

    応答プロパティ

    応答 API は、HTTP 応答の詳細を返すプロパティを提供します。これらのプロパティを使用すると、メタデータ ( ステータス、 ヘッダー、 タイプなど) と応答本文 (本文) にアクセスしてさらに処理できます。これにより、要求の成功 (OK) を確認し、返されたデータをさまざまな形式 (JSON やテキストなど) で解析できます。これらのプロパティは、クライアント側アプリケーションでサーバー応答を検証および処理するために重要です。各プロパティの詳細については、「 https://developer.mozilla.org/en-US/docs/Web/API/Response」を参照してください。

    表 : 1. 応答プロパティ
    プロパティ名 説明 例
    本文 準備完了。応答本文のコンテンツに読み取り可能なバイト データのストリームが含まれます。

    有効な値:ReadableStream または null。

    データタイプ：文字列

    		 
    const request = new Request("/myEndpoint", {
  method: "POST",
  body: "Hello world",
});

request.body; // ReadableStream
    bodyUsed 準備完了。本文がまだ読まれたかどうかを示すフラグ。
    指定できる値:
    • true:本文が読み取られました。
    • false:本文は読まれていません。

    データタイプ：ブーリアン

    		 
    const request = new Request("/myEndpoint", {
  method: "POST",
  body: "Hello world",
});

request.bodyUsed; // false

request.text().then((bodyAsText) => {
  console.log(request.bodyUsed); // true
});
    ヘッダー 読み取り専用です。応答に関連付けられたヘッダーオブジェクト。

    データタイプ:Headers オブジェクト

    		 
    const myRequest = new Request("flowers.jpg");
const myHeaders = myRequest.headers; // Headers {}
    OK 準備完了。応答が成功した (ステータスが 200 〜 299 の範囲) かどうかを示すフラグ。
    指定できる値:
    • true:応答は成功しました。
    • false:応答が成功しませんでした。

    データタイプ：ブーリアン

    		 
    const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

fetch(myRequest).then((response) => {
  console.log(response.ok); // returns true if the response returned successfully
  response.blob().then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
});
    リダイレクト 読み取り専用です。応答が要求がリダイレクトされた結果であるかどうかを示すフラグ。
    指定できる値:
    • true:要求はリダイレクトされました。
    • false:要求はリダイレクトされませんでした。

    データタイプ：ブーリアン

    		 
    const myRequest = new Request("flowers.jpg");
const myCred = myRequest.redirect;
    ステータス 読み取り専用です。応答の HTTP ステータスコード。たとえば、成功した場合は 200 です。

    データタイプ：数値

    		 
    const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

fetch(myRequest)
  .then((response) => {
    console.log("response.status =", response.status); // response.status = 200
    return response.blob();
  })
  .then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
    ステータステキスト 読み取り専用です。response.status の HTTP ステータスコードに対応するステータスメッセージ。たとえば、ステータスコードが 200 の場合、Continue が 100、404 が Not Found の場合、これは問題ありません。

    データタイプ：文字列

    		 
    const myRequest = new Request("flowers.jpg");

 // Log the HTTP status and status text
    console.log(`Status: ${response.status}`);
    console.log(`Status Text: ${response.statusText}`);
    
    // Check if the response is successful
    if (response.ok) {
      console.log("Request succeeded!");
    } else {
      console.log("Request failed.");
    }
  } catch (error) {
    console.error("Error fetching the URL:", error);
  }
}
    type 読み取り専用です。応答のタイプ。
    指定できる値:
    • basic: 通常の同一オリジンレスポンスで、「Set-Cookie」を除くすべてのヘッダーが公開されます。
    • cors:有効なクロスオリジン要求から応答を受信しました。特定のヘッダーと本文にアクセスできます。
    • error:ネットワークエラー。エラーを説明する有用な情報はありません。応答のステータスは 0 で、ヘッダーは空で不変です。これは、Response.error() から取得される応答のタイプです。
    • opaque:クロスオリジンリソースへの「no-cors」要求に対する応答。厳しく制限されています。
    • opaqueredirect:フェッチ要求が リダイレクト「manual」で行われました。応答のステータスが 0、ヘッダーが空、本文が null、トレーラーが空です。

    データタイプ：文字列

    		 
    const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

fetch(myRequest)
  .then((response) => {
    console.log("response.type =", response.type); // response.type = 'basic'
    return response.blob();
  })
  .then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
    URL 読み取り専用です。応答の URL。

    データタイプ：文字列

    		 
    const myRequest = new Request("flowers.jpg");
const myURL = myRequest.url; // "https://github.com/mdn/dom-examples/tree/main/fetch/fetch-request/flowers.jpg"

    応答をフェッチ:応答 (オブジェクト本体、オブジェクトオプション)

    Response() コンストラクタを使用して新しい Response オブジェクトを作成します。

    表 : 2. パラメーター
    名前 タイプ 説明
    body オブジェクト オプション。応答の本文を定義するオブジェクト。
    有効なタイプ：
    • ArrayBuffer
    • BLOB
    • データビュー
    • FormData
    • ReadableStream
    • 文字列
    • 文字列リテラル
    • TypedArray
    • URLSearchParams

    デフォルト：null
    オプション オブジェクト オプション。応答に適用するカスタム設定を含むオプションオブジェクト、または空のオブジェクト (デフォルト値)。可能なオプションは:
    • headers: ヘッダーのフェッチ :スコープ対象、グローバル オブジェクトまたは文字列のキー/値ペアのオブジェクトリテラル内に含まれる、応答に追加するヘッダー(参照については、 HTTPヘッダー を参照)。デフォルトでは空です。
    • status:応答のステータスコード。デフォルト値は 200 です。
    • statusText: ステータスコードに関連付けられたステータスメッセージ ("OK" など)。デフォルト値は "" です。

    この例では、コンストラクターを使用して新しい Response オブジェクトを作成し、新しい Blob を本文として渡し、カスタムの status オプションと statusText オプションを含む init オブジェクトを指定します。

    const myBlob = new Blob();
const myOptions = { status: 200, statusText: "Status message!" };
const myResponse = new Response(myBlob, myOptions);

    応答をフェッチ:arrayBuffer()

    ArrayBuffer で解決する promise を返します。

    arrayBuffer() メソッドは、画像、オーディオファイル、または処理が必要なその他のバイナリファイルなどのバイナリデータを扱う場合に便利です。

    表 : 3. パラメーター
    名前 タイプ 説明
    なし
    表 : 4. 返される内容
    タイプ 説明
    オブジェクト 汎用の生バイナリデータバッファを表す ArrayBuffer で解決する Promise。
    表 : 5. 例外
    例外 説明
    DOMException - AbortError 要求が中断されたことを示す例外。
    タイプエラー 次のいずれかの理由でスローされます。
    • 応答本文が乱されているか、ロックされています。
    • 本文コンテンツのデコード中にエラーが発生しました (たとえば、Content-Encoding ヘッダーが正しくないため)。
    範囲エラー 関連する ArrayBuffer の作成中に問題が発生しました。たとえば、データサイズが大きすぎる場合などです。
    次のスクリプト例では、サーバーからバイナリデータをフェッチし、次の手順を使用して arrayBuffer() メソッドを利用しながら処理します。
    1. fetch():指定された URL からリソースをフェッチします。
    2. response.ok:応答ステータスが 200 〜 299 の範囲かどうかを確認します。
    3. arrayBuffer():応答本文を読み取り、汎用の固定長の生バイナリデータバッファを表すArrayBufferに変換します。
    4. Uint8Array: ArrayBuffer を、バイナリ データを簡単に操作するための型付き配列である Uint8Array に変換します。
    javascriptCopy code// Simple API to fetch binary data and process it using arrayBuffer()asyncfunctionfetchBinaryData(url) {
  try {
    // Fetch the resource from the provided URLconst response = awaitfetch(url);

    // Check if the response is successfulif (!response.ok) {
      thrownewError(`HTTP error! Status: ${response.status}`);
    }

    // Convert the response body to an ArrayBufferconst arrayBuffer = await response.arrayBuffer();

    // Process the ArrayBuffer (e.g., convert it to a typed array)const uint8Array = newUint8Array(arrayBuffer);

    // Return the processed datareturn uint8Array;
  } catch (error) {
    console.error("Error fetching or processing binary data:", error);
    throw error;
  }
}

// Example usageconst binaryDataUrl = 'https://example.com/path/to/binary/data';

fetchBinaryData(binaryDataUrl)
  .then((data) => {
    console.log("Binary data as Uint8Array:", data);
    // Further processing can be done here, e.g., rendering an image or playing audio
  })
  .catch((error) => {
    console.error("Failed to fetch binary data:", error);
  });

    応答をフェッチ:blob()

    Blob で解決する Promise を返します。

    表 : 6. パラメーター
    名前 タイプ 説明
    なし
    表 : 7. 返される内容
    タイプ 説明
    オブジェクト BLOB で解決する Promise。
    表 : 8. 例外
    例外 説明
    DOMException - AbortError 要求が中断されたことを示す例外。
    タイプエラー 次のいずれかの理由でスローされます。
    • 応答本文が乱されているか、ロックされています。
    • 本文コンテンツのデコード中にエラーが発生しました (たとえば、Content-Encoding ヘッダーが正しくないため)。
    次の例は、次の手順を使用して、Fetch API で blob() メソッドを使用する方法を示しています。このユースケースは、画像やその他のバイナリコンテンツ (ビデオや PDF など) をフェッチして動的に表示する場合に最適です。
    1. fetch(url):指定された URL からリソースをフェッチします。
    2. response.blob():応答本文をバイナリデータを表すBlobオブジェクトに変換します。
    3. URL.createObjectURL(blob):DOM で使用できる BLOB の一時 URL を生成します (イメージ ソースなど)。
    4. DOM への画像の追加: 画像要素を動的に作成し、BLOB URL をソースとして設定して、ドキュメント本文に追加します。
    
async function fetchBlob(url) {
  try {
    // Fetch the resource from the provided URL
    const response = await fetch(url);

    // Check if the response is successful
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    // Convert the response body to a Blob
    const blob = await response.blob();

    // Create a URL for the Blob and log it
    const blobUrl = URL.createObjectURL(blob);
    console.log("Blob URL:", blobUrl);

    // For example, you can set it as the source of an image
    const img = document.createElement('img');
    img.src = blobUrl;
    img.alt = "Fetched Blob Image";
    document.body.appendChild(img);
  } catch (error) {
    console.error("Error fetching or processing blob:", error);
  }
}

// Example usage with an image URL
const imageUrl = 'https://via.placeholder.com/150';
fetchBlob(imageUrl);

    応答をフェッチ:bytes()

    Uint8Array で解決する promise を返します。

    表 : 9. パラメーター
    名前 タイプ 説明
    なし
    表 : 10. 返される内容
    タイプ 説明
    オブジェクト Uint8Array で解決する Promise。
    表 : 11. 例外
    例外 説明
    DOMException- AbortError 要求が中断されました。
    タイプエラー 次のいずれかの理由でスローされます。
    • 応答本文が乱されているか、ロックされています。
    • 本文コンテンツのデコード中にエラーが発生しました (たとえば、Content-Encoding ヘッダーが正しくないため)。
    範囲エラー 関連する ArrayBuffer の作成中に問題が発生しました。たとえば、データサイズが大きすぎる場合などです。

    次の例は、テキストファイルをフェッチし、本文を Uint8Array として返し、これを文字列にデコードする方法を示しています。

    const response = await fetch("https://www.example.com/textfile.txt");
const textFile = await response.bytes();
const string = new TextDecoder().decode(textFile);
console.log(string);

    応答をフェッチ:formData()

    FormData オブジェクトで解決する promise を返します。

    表 : 12. パラメーター
    名前 タイプ 説明
    なし
    表 : 13. 返される内容
    タイプ 説明
    オブジェクト FormData オブジェクトで解決する promise。
    表 : 14. 例外
    例外 説明
    DOMException- AbortError 要求が中断されました。
    タイプエラー 次のいずれかの理由でスローされます。
    • 応答本文が乱されているか、ロックされています。
    • 本文コンテンツのデコード中にエラーが発生しました (たとえば、Content-Encoding ヘッダーが正しくないため)。
    次の例は、 formData() を使用してフォーム送信応答を処理する方法を示しています。
    1. 要求本文: JSON.stringify() を使用して、URL エンコードされたパラメーターの代わりに JSON としてフォームデータを送信しました。
    2. Content-Type: application/json に設定して、要求本文の形式を示します。
    // Example of using Response.formData()
async function fetchFormData(url) {
  try {
    // Make a POST request to fetch the form data
    const response = await fetch(url, {
      method: 'POST',
      body: JSON.stringify({
        name: 'John Doe',
        email: 'john.doe@example.com',
      }),
      headers: {
        'Content-Type': 'application/json',
      },
    });

    // Check if the response is successful
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    // Parse the response as FormData
    const formData = await response.formData();

    // Iterate through the FormData entries
    for (const [key, value] of formData.entries()) {
      console.log(`${key}: ${value}`);
    }
  } catch (error) {
    console.error("Error fetching or processing form data:", error);
  }
}

// Example usage
const formEndpoint = 'https://httpbin.org/post'; // Replace with your form endpoint
fetchFormData(formEndpoint);

    出力:

    name: John Doe
email: john.doe@example.com

    応答をフェッチ:json()

    本文テキストを JSON として解析した結果に解決される Promise を返します。

    注:
    このメソッドの名前にもかかわらず、 json() の結果は JSON ではなく、JSON を入力として取得し、それを解析して JavaScript オブジェクトを生成した結果です。
    表 : 15. パラメーター
    名前 タイプ 説明
    なし
    表 : 16. 返される内容
    タイプ 説明
    オブジェクト JavaScript オブジェクトに解決される promise。このオブジェクトは、オブジェクト、アレイ、文字列、数値など、JSON で表すことができるものであれば何でもかまいません。
    表 : 17. 例外
    例外 説明
    DOMException- AbortError 要求が中断されました。
    タイプエラー 次のいずれかの理由でスローされます。
    • 応答本文が乱されているか、ロックされています。
    • 本文コンテンツのデコード中にエラーが発生しました (たとえば、Content-Encoding ヘッダーが正しくないため)。
    構文エラー 応答本文を JSON として解析できません。
    次の例は、 json() を使用して応答を形成する方法を示しています。
    1. fetch() は URL に GET リクエストを行います。
    2. response.okは、要求が成功したかどうかを確認します (ステータスコード 200 〜 299)。
    3. 成功すると、 response.json() が呼び出され、応答から JSON データが解析されます。
    4. 解析されたデータは、 コンソール API を使用してシステムログに記録されます。要求または解析中にエラーが発生した場合は、エラーがキャッチされ、ログに記録されます。
    fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

    応答をフェッチ:text()

    応答本文を読み取り、プレーン文字列として返します。応答は常に UTF-8 を使用してデコードされます。

    text() メソッドは、HTML、JSON (手動で処理する場合)、XML、またはプレーン文字列として扱われることを意図したプレーンテキストファイルなどのテキストデータを含む応答に役立ちます。

    表 : 18. パラメーター
    名前 タイプ 説明
    なし
    表 : 19. 返される内容
    タイプ 説明
    なし UTF-8 で囲まれた文字列で解決される promise。
    表 : 20. 例外
    例外 説明
    DOMException- AbortError 要求が中断されました。
    タイプエラー 次のいずれかの理由でスローされます。
    • 応答本文が乱されているか、ロックされています。
    • 本文コンテンツのデコード中にエラーが発生しました (たとえば、Content-Encoding ヘッダーが正しくないため)。

    次の例は、サーバーがプレーンテキストを返すときに text() を使用する簡単な方法を示しています。これは応答の例です。

    const response = awaitfetch('https://example.com/text-endpoint');
const text = await response.text();
console.log(text); // Outputs: Hello, world! This is a sample response.

    出力:

    Hello, world! This is a sample response.