From e194b8750cf8471c61f4c7fb1eccdfe867e8b3ca Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 16 Jan 2022 00:04:34 +0900 Subject: 2021/10/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/fetch_api/using_fetch/index.md | 413 ++++++++++++------------ 1 file changed, 199 insertions(+), 214 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/api/fetch_api/using_fetch/index.md b/files/ja/web/api/fetch_api/using_fetch/index.md index 6860b33e2e..44a4b90aa6 100644 --- a/files/ja/web/api/fetch_api/using_fetch/index.md +++ b/files/ja/web/api/fetch_api/using_fetch/index.md @@ -4,55 +4,51 @@ slug: Web/API/Fetch_API/Using_Fetch tags: - API - BODY - - Experimental + - 実験的 - Fetch - - Guide + - ガイド - HTTP - Promise - Response + - fetch POST & string body - request translation_of: Web/API/Fetch_API/Using_Fetch --- -

{{DefaultAPISidebar("Fetch API")}}

+{{DefaultAPISidebar("Fetch API")}} -
-

Fetch API を利用すると、リクエストやレスポンスといった HTTP のパイプラインを構成する要素を操作できるようになります。また {{domxref("GlobalFetch.fetch","fetch()")}} メソッドを利用することで、非同期のネットワーク通信を簡単にわかりやすく記述できるようになります。

-
+[Fetch API](/ja/docs/Web/API/Fetch_API) は、リクエストやレスポンスといった HTTP のパイプラインを操作する要素にアクセスするための JavaScript インターフェイスです。グローバルの {{domxref("fetch()")}} メソッドも提供しており、簡単で論理的な方法で、非同期にネットワーク越しでリソースを取得することができます。 -

従来、このような機能は {{domxref("XMLHttpRequest")}} を使用して実現されてきました。 Fetch はそれのより良い代替となるもので、{{domxref("ServiceWorker_API", "サービスワーカー")}}のような他の技術から簡単に利用することができます。 Fetch は CORS や HTTP 拡張のような HTTP に関連する概念をまとめて定義する場所でもあります。

+従来、このような機能は {{domxref("XMLHttpRequest")}} を使用して実現されてきました。フェッチはそれのより良い代替となるもので、{{domxref("Service_Worker_API", "サービスワーカー", "", 1)}}のような他の技術から簡単に利用することができます。フェッチは [CORS](/ja/docs/Web/HTTP/CORS) や HTTP への拡張のような HTTP に関連する概念をまとめて定義する場所でもあります。 -

fetch の仕様は jQuery.ajax() とは主に二つの点で異なっています。

+`fetch` の仕様は、 `jQuery.ajax()` とは特に以下の点で異なっています。 - +- `fetch()` から返されるプロミス ({{jsxref("Promise")}}) は、レスポンスが HTTP 404 や 500 を返す **HTTP エラーステータスの場合でも拒否されません**。サーバーがヘッダーで応答すると、プロミスは直ちに正常に解決します（レスポンスが 200-299 の範囲にない場合は、レスポンスの {{domxref("Response/ok", "ok")}} プロパティが false に設定されます）。拒否されるのは、ネットワーク障害があった場合や、何かがリクエストの完了を妨げた場合のみです。 +- `fetch()` は [init オプション](/ja/docs/Web/API/fetch#parameters)で資格情報を設定しない限り、**オリジンをまたぐクッキーを送信しません**。（[2018 年 4 月以降](https://github.com/whatwg/fetch/pull/585)。仕様では、既定の資格情報ポリシーを `same-origin` に変更しました。 Firefox は 61.0b13 から変更しました。） -

基本的な fetch リクエストは、本当に簡単に設定できます。以下のコードを見てください。

+基本的なフェッチリクエストは、本当に簡単に設定できます。以下のコードを見てください。 -
fetch('http://example.com/movies.json')
-  .then(response => response.json())
-  .then(data => console.log(data));
-
+```js +fetch('http://example.com/movies.json') + .then(response => response.json()) + .then(data => console.log(data)); +``` -

これはネットワーク越しに JSON ファイルを取得してコンソールに出力するスクリプトです。 fetch() の最も簡単な使い方は 1 つの引数 — fetch で取得したいリソースへのパス — のみをとり、レスポンス ({{domxref("Response")}} オブジェクト) を含む promise を返します。

+これはネットワーク越しに JSON ファイルを取得してコンソールに出力するスクリプトです。 `fetch()` の最も簡単な使い方は 1 つの引数 — fetch で取得したいリソースへのパス — のみをとり、 {{domxref("Response")}} オブジェクトで解決するプロミスを返します。 -

これはただの HTTP レスポンスであり、実際の JSON ではありません。 response オブジェクトから JSON を抽出するには、 {{domxref("Body.json","json()")}} メソッドを使用する必要があります。({{domxref("Body")}} のミックスインとして定義されていて、これは {{domxref("Request")}} と {{domxref("Response")}} の両オブジェクトに実装されています。)

+{{domxref("Response")}} は、実際の JSON レスポンス本体を直接持っているのではなく、 HTTP レスポンス全体を表現するものです。 {{domxref("Response")}} オブジェクトから JSON の本文の内容を抽出するには、 {{domxref("Response.json()", "json()")}} メソッドを使用します。これはレスポンス本文のテキストを JSON として解釈した結果で解決する第 2 のプロミスを返します。 -
-

メモ: Body ミックスインは本文の内容を他の mime タイプとして展開する似たようなメソッドを提供しています。詳細は {{anch("Body")}} の節をご覧ください。

-
+> **Note:** 本文の内容が他の形式である場合に展開する同様の方法は、 {{anch("Body")}} の節を参照してください。 -

Fetch リクエストは、検索したリソースからの指示よりも Content Security Policy の connect-src ディレクティブによって制御されます。

+Fetch リクエストは、受け取るリソースからの指示ではなく、[コンテンツセキュリティポリシー](/ja/docs/Web/HTTP/Headers/Content-Security-Policy)の `connect-src` ディレクティブによって制御されます。 -

リクエストにオプションを適用する

+### リクエストオプションの適用 -

fetch() メソッドには 2 つ目の引数を適用することもできます。多数の設定をコントロールすることのできる init オブジェクトです。

+`fetch()` メソッドには 2 つ目の引数を適用することができ、 `init` オブジェクトで様々な種類の設定を制御することができます。 -

すべての設定可能なオプションや詳細な説明を見るには {{domxref("GlobalFetch.fetch","fetch()")}} を参照してください。

+すべての設定可能なオプションや詳しい説明については、 {{domxref("fetch()")}} を参照してください。 -
// POST メソッドの実装の例
+```js
+// POST メソッドの実装の例
 async function postData(url = '', data = {}) {
   // 既定のオプションには * が付いています
   const response = await fetch(url, {
@@ -66,55 +62,62 @@ async function postData(url = '', data = {}) {
     },
     redirect: 'follow', // manual, *follow, error
     referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
-    body: JSON.stringify(data) // 本文のデータ型は "Content-Type" ヘッダーと一致する必要があります
+    body: JSON.stringify(data) // 本文のデータ型は "Content-Type" ヘッダーと一致させる必要があります
   })
-  return response.json(); // レスポンスの JSON を解析
+  return response.json(); // JSON のレスポンスをネイティブの JavaScript オブジェクトに解釈
 }
 
 postData('https://example.com/answer', { answer: 42 })
-  .then(data => {
+  .then(data => {
     console.log(data); // `data.json()` の呼び出しで解釈された JSON データ
   });
-
+``` -

なお、 mode: "no-cors" はリクエスト中の限られた数のヘッダーにしか許可されていません。

+なお、 `mode: "no-cors"` はリクエスト中の限られたヘッダーにしか許可されていません。 - +- `Accept` +- `Accept-Language` +- `Content-Language` +- `Content-Type` のうち、値が `application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain` のいずれかのもの -

認証情報つきのリクエストの送信

+### 認証情報つきのリクエストの送信 -

ブラウザーに認証情報の入ったリクエストを送るようにするには、オリジン間の呼び出しであっても、 credentials: 'include' を init オブジェクトに追加して fetch() メソッドに渡します。

+ブラウザーに認証情報のついたリクエストを送るようにするには、同一オリジンの場合もオリジン間の呼び出しの場合も、 `credentials: 'include'` を `init` オブジェクトに追加して `fetch()` メソッドに渡してください。 -
fetch('https://example.com', {
+```js
+fetch('https://example.com', {
   credentials: 'include'
 });
-
+``` + +> **Note:** `Access-Control-Allow-Origin` は `credentials: 'include'` を含むリクエストでは、ワイルドカードを使用することを禁止しています。このような場合、正確なオリジンを提供する必要があります。 CORS unblocker 拡張を使用している場合でも、リクエストは失敗します。 -

リクエスト URL が呼び出しスクリプトと同一オリジンの場合だけクレデンシャルを送りたい場合、credentials: 'same-origin'を追加します。

+> **Note:** この設定に関係なく、ブラウザーはプリフライトリクエストで資格情報を送信しないようにしてください。詳細については、 [CORS > 資格情報を含むリクエスト](/ja/docs/Web/HTTP/CORS#資格情報を含むリクエスト)を参照してください。 -
// The calling script is on the origin 'https://example.com'
+リクエスト URL が呼び出しスクリプトと同一オリジンの場合だけ資格情報を送りたい場合、 `credentials: 'same-origin'` を追加します。
+
+```js
+// オリジン 'https://example.com' で呼び出すスクリプトです。
 
 fetch('https://example.com', {
   credentials: 'same-origin'
 });
-
+``` -

この代わりにブラウザーがリクエストにクレデンシャルを含んでないことを保証するには、credentials: 'omit'を使います。

+ブラウザーがリクエストに資格情報を含めないことを保証するには、代わりに `credentials: 'omit'` を使用してください。 -
fetch('https://example.com', {
+```js
+fetch('https://example.com', {
   credentials: 'omit'
-})
+}) +``` -

JSON データのアップロード

+### JSON データのアップロード -

{{domxref("GlobalFetch.fetch","fetch()")}} を使って JSON-エンコードしたデータを POST します。

+{{domxref("fetch","fetch()")}} を使って JSON エンコードしたデータを POST します。 -
const data = { username: 'example' };
+```js
+const data = { username: 'example' };
 
 fetch('https://example.com/profile', {
   method: 'POST', // or 'PUT'
@@ -123,20 +126,21 @@ fetch('https://example.com/profile', {
   },
   body: JSON.stringify(data),
 })
-.then(response => response.json())
-.then(data => {
+.then(response => response.json())
+.then(data => {
   console.log('Success:', data);
 })
-.catch((error) => {
+.catch((error) => {
   console.error('Error:', error);
 });
-
+``` -

ファイルのアップロード

+### ファイルのアップロード -

ファイルは HTML <input type="file" /> input 要素や、 {{domxref("FormData.FormData","FormData()")}} や {{domxref("WindowOrWorkerGlobalScope/fetch","fetch()")}} を使ってアップロードできます。

+ファイルは HTML の `` input 要素と、{{domxref("FormData.FormData","FormData()")}} と {{domxref("fetch()")}} を使ってアップロードできます。 -
const formData = new FormData();
+```js
+const formData = new FormData();
 const fileField = document.querySelector('input[type="file"]');
 
 formData.append('username', 'abc123');
@@ -146,45 +150,47 @@ fetch('https://example.com/profile/avatar', {
   method: 'PUT',
   body: formData
 })
-.then(response => response.json())
-.then(result => {
+.then(response => response.json())
+.then(result => {
   console.log('Success:', result);
 })
-.catch(error => {
+.catch(error => {
   console.error('Error:', error);
 });
-
+``` -

複数のファイルのアップロード

+### 複数のファイルのアップロード -

HTML の <input type="file" multiple /> 入力欄と {{domxref("FormData.FormData","FormData()")}} と {{domxref("GlobalFetch.fetch","fetch()")}} を使用してファイルをアップロードすることができます。

+ファイルのアップロードは、 HTML の `` 入力要素と {{domxref("FormData.FormData","FormData()")}} と {{domxref("fetch()")}} を使用して行うことができます。 -
const formData = new FormData();
+```js
+const formData = new FormData();
 const photos = document.querySelector('input[type="file"][multiple]');
 
 formData.append('title', 'My Vegas Vacation');
-for (let i = 0; i < photos.files.length; i++) {
-  formData.append('photos', photos.files[i]);
+for (let i = 0; i < photos.files.length; i++) {
+  formData.append(`photos_${i}`, photos.files[i]);
 }
 
 fetch('https://example.com/posts', {
   method: 'POST',
   body: formData,
 })
-.then(response => response.json())
-.then(result => {
+.then(response => response.json())
+.then(result => {
   console.log('Success:', result);
 })
-.catch(error => {
+.catch(error => {
   console.error('Error:', error);
 });
-
+``` -

テキストファイルの1行ずつの処理

+### テキストファイルの 1 行ずつの処理 -

レスポンスから読み込まれるチャンクは、行の境界できれいに分割されておらず、文字列ではなく Uint8Arrays になっています。テキストファイルをフェッチして一行ずつ処理したい場合、これらの複雑な処理を行うのはあなた次第です。次の例は、行イテレータを作成することでこれを行う方法の一つを示しています (簡単にするため、テキストは UTF-8 であると仮定しており、フェッチエラーは処理していません)。

+レスポンスから読み込まれる塊は、行の境界できれいに分割されておらず、文字列ではなく Uint8Arrays になっています。テキストファイルを読み取って一行ずつ処理したい場合、これらの複雑な処理を行うのはあなた次第です。次の例は、行イテレーターを作成することでこれを行う方法の一つを示しています (簡単にするため、テキストは UTF-8 であると仮定しており、読み取りエラーは処理していません)。 -
async function* makeTextFileLineIterator(fileURL) {
+```js
+async function* makeTextFileLineIterator(fileURL) {
   const utf8Decoder = new TextDecoder('utf-8');
   const response = await fetch(fileURL);
   const reader = response.body.getReader();
@@ -210,7 +216,7 @@ fetch('https://example.com/posts', {
     yield chunk.substring(startIndex, result.index);
     startIndex = re.lastIndex;
   }
-  if (startIndex < chunk.length) {
+  if (startIndex < chunk.length) {
     // last line didn't end in a newline char
     yield chunk.substr(startIndex);
   }
@@ -223,32 +229,34 @@ async function run() {
 }
 
 run();
-
+``` -

fetch が成功したかチェックする

+### フェッチが成功したかの確認 -

ネットワークエラーに遭遇すると {{domxref("GlobalFetch.fetch","fetch()")}} promise は {{jsxref("TypeError")}} を返して reject 状態になります。サーバー側の CORS が適切に設定されていない場合も同様です(アクセス権の問題ですけどね) — 一方で例えば 404 はネットワークエラーを構成しません。fetch() が成功したかどうかの明確な判定をするには、プロミスが解決されて、{{domxref("Response.ok")}} プロパティが true になっているかなどを確認します。次のようなコードになるでしょう。

+{{domxref("fetch()")}} のプロミスは、ネットワークエラーに遭遇したりサーバー側の CORS の設定（通常はアクセス権の問題など）が間違っていたりすると、 {{jsxref("TypeError")}} で拒否されます。例えば、 404 はネットワークエラーにはなりません。 `fetch()` が成功したかどうかを正確に判定するには、プロミスが解決された後で、 {{domxref("Response.ok")}} プロパティが true になっているかを確認してください。次のようなコードになるでしょう。 -
fetch('flowers.jpg')
-  .then(response => {
+```js
+fetch('flowers.jpg')
+  .then(response => {
     if (!response.ok) {
-      throw new Error('Network response was not ok');
+      throw new Error('Network response was not OK');
     }
     return response.blob();
   })
-  .then(myBlob => {
+  .then(myBlob => {
     myImage.src = URL.createObjectURL(myBlob);
   })
-  .catch(error => {
+  .catch(error => {
     console.error('There has been a problem with your fetch operation:', error);
   });
-
+``` -

独自の request オブジェクトを fetch に渡す

+### 独自のリクエストオブジェクトの提供 -

fetch() を呼ぶときにリクエストしたいリソースへのパスを渡す代わりに、{{domxref("Request.Request","Request()")}} コンストラクターを使用して Request オブジェクトを作成して fetch() メソッドの引数として渡すこともできます。

+`fetch()` の呼び出しに、リクエストしたいリソースへのパスを渡す代わりに、{{domxref("Request.Request","Request()")}} コンストラクターを使用して Request オブジェクトを作成し、 `fetch()` メソッドの引数として渡すこともできます。 -
const myHeaders = new Headers();
+```js
+const myHeaders = new Headers();
 
 const myRequest = new Request('flowers.jpg', {
   method: 'GET',
@@ -258,46 +266,48 @@ const myRequest = new Request('flowers.jpg', {
 });
 
 fetch(myRequest)
-  .then(response => response.blob())
-  .then(myBlob => {
+  .then(response => response.blob())
+  .then(myBlob => {
     myImage.src = URL.createObjectURL(myBlob);
   });
-
+``` -

fetch() メソッドの引数と全く同じ引数を Request() に適用させることができます。また、 request オブジェクトのコピーを作成するためにすでに存在する request オブジェクトを渡すこともできます。

+`Request()` は、 `fetch()` メソッドとまったく同じ引数を受け入れます。既存のリクエストオブジェクトを渡して、コピーを作成することもできます。 -
const anotherRequest = new Request(myRequest, myInit);
-
+```js +const anotherRequest = new Request(myRequest, myInit); +``` -

これは、リクエストとレスポンスの本文を一つだけ使用するのでとても有用です。必要であれば、init オプションを変化させながらリクエスト / レスポンスを再利用できるようにコピーします。コピーは body が読まれる前でなければならず、コピーの中の body を読むとオリジナルのリクエストも既読にマークされます。

+これは、リクエストとレスポンスの本文を 1 つだけ使用するのでとても有用です。必要であれば、`init` オプションを変化させながらリクエスト/レスポンスを再利用できるようにコピーします。コピーは body が読まれる前でなければならず、コピーの中の body を読むと、オリジナルのリクエストも既読にマークされます。 -
-

メモ: {{domxref("Request.clone","clone()")}} メソッドを利用してコピーを生成することもできます。これには、ほかのコピーメソッドと若干異なる意味があります — 古いリクエストの body がすでに読み込まれていた場合、前者は失敗しますが、clone() は失敗しません (レスポンスでも同じです)。

-
+> **Note:** {{domxref("Request.clone","clone()")}} メソッドを利用してコピーを生成することもできます。これには、ほかのコピーメソッドと若干異なる意味があります — 古いリクエストの body がすでに読み込まれていた場合、前者は失敗しますが、`clone()` は失敗しません (レスポンスでも同じです)。 -

Headers

+## Headers -

{{domxref("Headers")}} インターフェースでは、 {{domxref("Headers.Headers","Headers()")}} コンストラクターを使用して、ヘッダーオブジェクトを作成することができます。ヘッダーオブジェクトはシンプルな複数の名前と値の Map です。

+{{domxref("Headers")}} インターフェースでは、 {{domxref("Headers.Headers","Headers()")}} コンストラクターを使用して、ヘッダーオブジェクトを作成することができます。ヘッダーオブジェクトは、シンプルな複数の名前と値のマップです。 -
const content = 'Hello World';
+```js
+const content = 'Hello World';
 const myHeaders = new Headers();
 myHeaders.append('Content-Type', 'text/plain');
 myHeaders.append('Content-Length', content.length.toString());
 myHeaders.append('X-Custom-Header', 'ProcessThisImmediately');
-
+``` -

同じことはコンストラクターに配列の配列かオブジェクトリテラルを渡すことで達成できます。

+コンストラクターに配列の配列またはオブジェクトリテラルを渡すことで、同じことが実現できます。 -
const myHeaders = new Headers({
+```js
+const myHeaders = new Headers({
   'Content-Type': 'text/plain',
   'Content-Length': content.length.toString(),
   'X-Custom-Header': 'ProcessThisImmediately'
 });
-
+``` -

ヘッダーの中身を見たり、検索することができます。

+ヘッダーの中身を見たり、検索することができます。 -
console.log(myHeaders.has('Content-Type')); // true
+```js
+console.log(myHeaders.has('Content-Type')); // true
 console.log(myHeaders.has('Set-Cookie')); // false
 myHeaders.set('Content-Type', 'text/html');
 myHeaders.append('X-Custom-Header', 'AnotherValue');
@@ -306,70 +316,67 @@ console.log(myHeaders.get('Content-Length')); // 11
 console.log(myHeaders.get('X-Custom-Header')); // ['ProcessThisImmediately', 'AnotherValue']
 
 myHeaders.delete('X-Custom-Header');
-console.log(myHeaders.get('X-Custom-Header')); // [ ]
-
+console.log(myHeaders.get('X-Custom-Header')); // null +``` -

いくつかの操作は {{domxref("ServiceWorker_API","ServiceWorkers")}} でしか役立ちませんが、ヘッダーを操作するためのより良い API を提供しています。

+いくつかの操作は{{domxref("Service_Worker_API","サービスワーカー", "", 1)}}でしか役立ちませんが、ヘッダーを操作するためのより良い API を提供しています。 -

Headers のメソッドはすべて、有効な HTTP ヘッダーではない名前が渡されたとき TypeError を投げます。 immutable ガード (下記参照) がかかっている場合も、 TypeError を投げます。もしくはエラーを投げずに失敗します。例を見てください。

+Headers のメソッドはすべて、有効な HTTP ヘッダーではない名前が渡されたときは `TypeError` が発生します。 immutable ガード ([下記参照](#ガード)) がかかっている場合に変更操作を行った場合も `TypeError` が発生します。それ以外の場合は、暗黙に失敗します。例を示します。 -
const myResponse = Response.error();
+```js
+const myResponse = Response.error();
 try {
   myResponse.headers.set('Origin', 'http://mybank.com');
 } catch (e) {
   console.log("銀行のふりをしないで下さい！");
 }
-
+``` -

ヘッダーの良い使用方法としては、以下のように、処理を行う前に、コンテンツタイプが正しいかどうか判定する等の使い方があります。

+ヘッダーの良い使用方法としては、以下のように、処理を行う前に、コンテンツタイプが正しいかどうか判定する等の使い方があります。 -
fetch(myRequest)
-  .then(response => {
+```js
+fetch(myRequest)
+  .then(response => {
      const contentType = response.headers.get('content-type');
      if (!contentType || !contentType.includes('application/json')) {
        throw new TypeError("Oops, we haven't got JSON!");
      }
      return response.json();
   })
-  .then(data => {
+  .then(data => {
       /* process your data further */
   })
-  .catch(error => console.error(error));
-
+ .catch(error => console.error(error)); +``` -

Guard

+### ガード -

ヘッダーは、リクエストで送信でき、レスポンスで受信できます。また、どの情報が変更できる（または、すべき）かといったさまざまな制限があります。そのため、ヘッダーは guard プロパティを持っています。これはリクエストやレスポンスに含まれませんが、ヘッダーオブジェクトでできる変更操作に影響を与えます。

+ヘッダーは、リクエストで送信でき、レスポンスで受信できます。また、どの情報が変更できる（または、すべき）かといったさまざまな制限があります。そのため、ヘッダーには _guard_ プロパティがあります。これはリクエストやレスポンスに含まれませんが、ヘッダーオブジェクトでできる変更操作に影響を与えます。 -

設定できるガード値には以下のものがあります。

+設定できるガード値には以下のものがあります。 - +- `none`: 既定値です。 +- `request`: リクエストから得たヘッダーオブジェクト ({{domxref("Request.headers")}}) を保護します。 +- `request-no-cors`: {{domxref("Request.mode")}} が `no-cors` で生成されたリクエストから得たヘッダーオブジェクトを保護します。 +- `response`: レスポンスから得たヘッダーオブジェクト ({{domxref("Response.headers")}}) を保護します。 +- `immutable`: ヘッダーを読み取り専用にします。主にサービスワーカーで使用されます。 -
-

メモ: request のガードされたヘッダーの Content-Length ヘッダーは追加や変更できない可能性があります。同様に、レスポンスヘッダに Set-Cookie を挿入することはできません。ServiceWorker は、同期レスポンスを経由してクッキーを設定できません。

-
+> **Note:** `response` のガードされたヘッダーオブジェクトに `Content-Length` ヘッダーを追加したり設定したりすることはできません。同様に、レスポンスヘッダーに `Set-Cookie` を挿入することもできません。サービスワーカーは合成されたレスポンスでクッキーを設定することはできません。 -

Response オブジェクト

+## Response オブジェクト -

すでに見てきたように, {{domxref("Response")}} インスタンスは、 fetch() プロミスが解決(resolve)されたときに返り値として渡されます。

+すでに見てきたように、 {{domxref("Response")}} インスタンスは、 `fetch()` プロミスが解決 (resolve) されたときに返値として渡されます。 -

下記はどんな response オブジェクトでも共通で使用できる response プロパティです。

+使用できる主なレスポンスプロパティには、以下のものがあります。 - +- {{domxref("Response.status")}} — 整数値 (既定値は 200) で、 HTTP ステータスコードが入ります。 +- {{domxref("Response.statusText")}} — HTTP ステータスコードに対応するメッセージの文字列 (既定値は "")。なお、 HTTP/2 ではステータスメッセージに[対応していません](https://fetch.spec.whatwg.org/#concept-response-status-message)。 +- {{domxref("Response.ok")}} — 上述の例で使用したように、これは HTTP ステータスコードが 200-299 の範囲にあるかどうかをチェックする略記法です。これは論理値を返します。 -

Response オブジェクトは JavaScript で動的に作ることもできます。これは {{domxref("ServiceWorker_API", "ServiceWorkers")}} 内において非常に役立ちます。例えばリクエストを受け取ったときに {{domxref("FetchEvent.respondWith","respondWith()")}} メソッドによってカスタマイズされたレスポンスを返すようなときに役立ちます。

+Response オブジェクトは JavaScript で動的に作ることもできます。これは{{domxref("Service_Worker_API", "サービスワーカー", "", 1)}}で非常に役立ちます。例えばリクエストを受け取ったときに {{domxref("FetchEvent.respondWith","respondWith()")}} メソッドによってカスタマイズされたレスポンスを返すようなときに役立ちます。 -
const myBody = new Blob();
+```js
+const myBody = new Blob();
 
 addEventListener('fetch', function(event) {
   // ServiceWorker intercepting a fetch
@@ -379,97 +386,75 @@ addEventListener('fetch', function(event) {
     })
   );
 });
-
- -

{{domxref("Response.Response","Response()")}} コンストラクターはオプションとして 2 つの引数をとることができます — レスポンス本文と初期化オブジェクトです。 ({{domxref("Request.Request","Request()")}} が受け取れるものと似ています。)

+``` - +{{domxref("Response.Response","Response()")}} コンストラクターは、オプションとして 2 つの引数をとることができます。レスポンス本文と初期化オブジェクトです。 ({{domxref("Request.Request","Request()")}} が受け取れるものと似ています。) -
-

メモ: 静的メソッド {{domxref("Response.error","error()")}} は単純にエラーレスポンスを返します。同様に {{domxref("Response.redirect","redirect()")}} メソッドも 指定した URL にリダイレクトするレスポンスを返します。これらはサービスワーカーにのみ関連しています。

-
+> **Note:** 静的メソッド {{domxref("Response.error","error()")}} は単純にエラーレスポンスを返します。同様に {{domxref("Response.redirect","redirect()")}} メソッドも 指定した URL にリダイレクトするレスポンスを返します。これらはサービスワーカーにのみ関連しています。 -

Body

+## Body -

リクエストもレスポンスもボディを持っています。body は以下のタイプのいずれかのインスタンスです。

+リクエストにもレスポンスにも本文データが含まれています。本文は以下のタイプのいずれかのインスタンスです。 - +- {{jsxref("ArrayBuffer")}} +- {{domxref("ArrayBufferView")}} (Uint8Array など) +- {{domxref("Blob")}}/File +- 文字列 +- {{domxref("URLSearchParams")}} +- {{domxref("FormData")}} -

{{domxref("Body")}} ミックスインは {{domxref("Request")}} や{{domxref("Response")}} に実装されていて、コンテンツを抜き出すために以下のメソッドが定義されています。これらはすべて最終的に実際の中身で解決されるプロミスを返します。

+{{domxref("Request")}} および {{domxref("Response")}} インターフェイスは本文を展開するために以下のメソッドを持っています。これらはすべて最終的に実際の内容で解決されるプロミスを返します。 - +- {{domxref("Request.arrayBuffer()")}} / {{domxref("Response.arrayBuffer()")}} +- {{domxref("Request.blob()")}} / {{domxref("Response.blob()")}} +- {{domxref("Request.formData()")}} / {{domxref("Response.formData()")}} +- {{domxref("Request.json()")}} / {{domxref("Response.json()")}} +- {{domxref("Request.text()")}} / {{domxref("Response.text()")}} -

これらは非テキストデータを XHR よりはるかに楽に扱うことができます。

+これらはテキストでないデータを XHR よりはるかに楽に扱うことができます。 -

Request 本文は、body パラメータを渡すことによって設定することができます。

+リクエスト本文は、body 引数を渡すことによって設定することができます。 -
const form = new FormData(document.getElementById('login-form'));
+```js
+const form = new FormData(document.getElementById('login-form'));
 fetch('/login', {
   method: 'POST',
   body: form
 });
-
+``` -

Request や Response (と fetch() 関数の拡張) は自動的にコンテンツタイプを決定しようとします。Request もまた、指定されていなければ自動で Content-Type ヘッダーを設定しようとします。

+リクエストとレスポンス (および `fetch()` 関数の拡張) は、自動的にコンテンツタイプを決定しようとします。リクエストもまた、指定されていなければ自動で `Content-Type` ヘッダーを設定しようとします。 -

使用可能かどうかの判別

+## 使用可能かどうかの判別 -

Fetch API が利用できるかどうかは、{{domxref("Headers")}}、{{domxref("Request")}}、{{domxref("Response")}}、{{domxref("GlobalFetch.fetch","fetch()")}} のいずれかが {{domxref("Window")}} もしくは {{domxref("Worker")}} のスコープで参照できるかどうかによって判断できます。判断を行っている例は次のようになります。

+Fetch API が利用できるかどうかは、{{domxref("Headers")}}、{{domxref("Request")}}、{{domxref("Response")}}、{{domxref("fetch()")}} のいずれかが {{domxref("Window")}} もしくは {{domxref("Worker")}} のスコープで参照できるかどうかによって判断できます。例を挙げます。 -
if (window.fetch) {
+```js
+if (window.fetch) {
   // ここで fetch リクエストを実行
 } else {
   // XMLHttpRequest で何か実行する？
 }
-
- -

ポリフィル

- -

Fetch がサポートされていないブラウザーを使うため、非サポートブラウザー用の機能を再生成する Fetch Polyfill が利用できます。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Fetch')}}{{Spec2('Fetch')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

- -

関連情報

- - +``` + +## ポリフィル + +対応していないブラウザーでフェッチを使用するには、非対応ブラウザー用の機能を再生成する [Fetch ポリフィル](https://github.com/github/fetch)が利用できます。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| --------------------- | ------------------ | -------- | +| {{SpecName('Fetch')}} | {{Spec2('Fetch')}} | 初回定義 | + +## ブラウザーの互換性 + +{{Compat("api.fetch")}} + +## 関連情報 + +- [ServiceWorker API](/ja/docs/Web/API/Service_Worker_API) +- [HTTP アクセス制御 (CORS)](/ja/docs/Web/HTTP/CORS) +- [HTTP](/ja/docs/Web/HTTP) +- [Fetch polyfill](https://github.com/github/fetch) +- [Fetch examples on Github](https://github.com/mdn/fetch-examples/) -- cgit v1.2.3-54-g00ecf