応答をフェッチ: スコープ指定、グローバル

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

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

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

    フェッチアクションをサポートするために、システムプロパティ glide.hosts.allowlist を使用すると、フェッチメソッドがアクセスできるホストを制御できます。これは、 RestMessageV2 などの HTTP API や上記の 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、100 の場合は [続行]、404 の場合は [見つかりません] などです。

    データタイプ：文字列

    		 
    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);
  }
}
    タイプ 読み取り専用です。応答のタイプ。
    許容値:
    • basic:「Set-Cookie」を除くすべてのヘッダーが公開された、通常の同一生成元応答。
    • cors:有効なクロスオリジン要求から応答を受信しました。特定のヘッダーと本文にアクセスできます。
    • エラー:ネットワークエラー。エラーを説明する有用な情報はありません。応答のステータスは 0 で、ヘッダーは空で不変です。これは、 Response.error() から取得された応答のタイプです。
    • opaque:クロスオリジンリソースへの「no-cors」要求への応答。厳しく制限されています。
    • opaqueredirect:フェッチ要求が redirect: "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() コンストラクターを使用して新しい Response オブジェクトを作成します。

    表 : 2. パラメーター
    名前 タイプ 説明
    本文 オブジェクト オプション。応答の本文を定義するオブジェクト。
    有効なタイプ:
    • アレイバッファ
    • BLOB
    • データビュー
    • フォームデータ
    • 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:中止エラー 要求が中断されたことを示す例外。
    タイプエラー 次のいずれかの理由でスローされます。
    • 応答本文が妨害されているか、ロックされています。
    • 本文コンテンツのデコード中にエラーが発生しました (たとえば、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:中止エラー 要求が中断されたことを示す例外。
    タイプエラー 次のいずれかの理由でスローされます。
    • 応答本文が妨害されているか、ロックされています。
    • 本文コンテンツのデコード中にエラーが発生しました (たとえば、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:中止エラー 要求は中断されました。
    タイプエラー 次のいずれかの理由でスローされます。
    • 応答本文が妨害されているか、ロックされています。
    • 本文コンテンツのデコード中にエラーが発生しました (たとえば、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:中止エラー 要求は中断されました。
    タイプエラー 次のいずれかの理由でスローされます。
    • 応答本文が妨害されているか、ロックされています。
    • 本文コンテンツのデコード中にエラーが発生しました (たとえば、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:中止エラー 要求は中断されました。
    タイプエラー 次のいずれかの理由でスローされます。
    • 応答本文が妨害されているか、ロックされています。
    • 本文コンテンツのデコード中にエラーが発生しました (たとえば、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:中止エラー 要求は中断されました。
    タイプエラー 次のいずれかの理由でスローされます。
    • 応答本文が妨害されているか、ロックされています。
    • 本文コンテンツのデコード中にエラーが発生しました (たとえば、Content-Encoding ヘッダーが正しくないため)。

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

    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.