From 8dba1bffc690b6a6fff95c1dd7c265b4ddef5ed4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 13 Aug 2021 17:24:28 +0900 Subject: Body ミックスインを廃止し、 Response インターフェイスへ統合 (#1898) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - orphaned にあった Body ミックスインを廃止 - Body ミックスインのメンバーを Response インターフェイスへ移動 - 関連する記事を 2021/08/04 時点の英語版に同期 --- files/ja/web/api/fetch_api/index.html | 89 +++++++++++++++-------------------- 1 file changed, 38 insertions(+), 51 deletions(-) (limited to 'files/ja/web/api/fetch_api') diff --git a/files/ja/web/api/fetch_api/index.html b/files/ja/web/api/fetch_api/index.html index 7f1f35da9b..2eaad2cd9d 100644 --- a/files/ja/web/api/fetch_api/index.html +++ b/files/ja/web/api/fetch_api/index.html @@ -3,7 +3,6 @@ title: Fetch API slug: Web/API/Fetch_API tags: - API - - Experimental - Fetch - Landing - Reference @@ -14,101 +13,89 @@ translation_of: Web/API/Fetch_API ---
{{DefaultAPISidebar("Fetch API")}}
-

Fetch API には (ネットワーク越しの通信を含む) リソース取得のためのインターフェイスが定義されています。{{domxref("XMLHttpRequest")}} と似たものではありますが、より強力で柔軟な操作が可能です。

+

Fetch API は (ネットワーク越しの通信を含む) リソース取得のためのインターフェイスを提供しています。 {{DOMxRef("XMLHttpRequest")}} と似たものではありますが、より強力で柔軟な操作が可能です。

-

概念と利用方法

+

{{AvailableInWorkers}}

-

Fetch では {{domxref("Request")}} と {{domxref("Response")}} が一般的な形で定義されています。またネットワークリクエストに関連する様々なものも定義されています。これらは service worker や Cache API といったリクエストとレスポンスを扱う API や、独自のリクエストを発生させる場面でも利用できるようになるでしょう。

+

概念と利用方法

-

また CORS や HTTP オリジンヘッダーの振る舞いといった関連した概念についても定義されています。この定義は、現行の分散している個別の定義を置き換えるものです。

+

Fetch は {{DOMxRef("Request")}} と {{DOMxRef("Response")}} オブジェクト (およびネットワークリクエストに関わるその他のもの) の汎用的な定義が提供されています。これにより、サービスワーカー、キャッシュ API、リクエストやレスポンスを処理または変更するその他の類似のもの、またはプログラム的にレスポンスを生成する (つまり、コンピュータプログラムまたはパーソナルプログラミング命令を使用する) 必要があるあらゆる種類の利用法など、将来的に必要とされるあらゆる場所で使用できるようになります。

-

リソースを取得するためのリクエストは、 {{domxref("GlobalFetch.fetch")}} メソッドを呼ぶことで作成できます。このメソッドは {{domxref("Window")}} や {{domxref("WorkerGlobalScope")}} といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。

+

また CORS や HTTP の Origin ヘッダーの振る舞いといった関連した概念についても定義されています。この定義は、現行の分散している個別の定義を置き換えるものです。

-

fetch() メソッドは必須の引数を1つ取り、取得したいリソースのパスを指定します。成功か失敗かに関わらず、リクエストに対する {{domxref("Response")}} に解決できる {{domxref("Promise")}} を返します。第2引数は任意で、 init オプションオブジェクトを渡すことができます。（{{domxref("Request")}} をご覧ください）。

+

リソースを取得するためのリクエストは、 {{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}} メソッドを呼ぶことで作成できます。このメソッドは {{DOMxRef("Window")}} や {{DOMxRef("WorkerGlobalScope")}} といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。

-

{{domxref("Response")}} を受け取ると、レスポンスに含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります（{{domxref("Body")}} をご覧ください）。

+

fetch() メソッドは必須の引数を 1 つ取り、取得したいリソースのパスを指定します。成功か失敗かに関わらず、リクエストに対する {{DOMxRef("Response")}} に解決できる {{JSxRef("Promise")}} を返します。第 2 引数は任意で、 init オプションオブジェクトを渡すことができます。({{DOMxRef("Request")}} を参照してください。)

-

{{domxref("Request.Request","Request()")}} および {{domxref("Response.Response","Response()")}} を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、{{domxref("FetchEvent.respondWith")}} のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。

+

{{DOMxRef("Response")}} を受け取ると、レスポンスに含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります。

-

jQueryとの違い

+

{{DOMxRef("Request.Request","Request()")}} および {{DOMxRef("Response.Response","Response()")}} を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、{{DOMxRef("FetchEvent.respondWith")}} のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。

-

fetch は主に3つの点で jQuery.ajax() と異なります。

+

jQueryとの違い

+ +

fetch は主に 3 つの点で jQuery.ajax() と異なります。

-

注: Fetch API の詳しい利用方法は Using Fetch を参照してください。また Fetch basic concepts では、Fetch API の基本概念が解説されています。

+

注: Fetch API の詳しい利用方法は Fetch の使用を参照してください。また Fetch の基本概念では、Fetch API の基本概念が解説されています。

-

フェッチを中止する

+

フェッチの中止

-

ブラウザーは Fetch や XHR などの操作を完了前に中止させることができる {{domxref("AbortController")}} および {{domxref("AbortSignal")}} インターフェイス（つまり Abort API）に実験的に対応し始めています。詳しくはインターフェイスのページを参照してください。

+

ブラウザーは Fetch や XHR などの操作を完了前に中止させることができる {{DOMxRef("AbortController")}} および {{DOMxRef("AbortSignal")}} インターフェイス (つまり Abort API) に実験的に対応し始めています。詳しくはインターフェイスのページを参照してください。

-

Fetch インターフェイス

+

Fetch インターフェイス

-
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
+
{{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}
fetch() メソッドはリソース取得のために使用されます。
-
{{domxref("Headers")}}
+
{{DOMxRef("Headers")}}
リクエストとレスポンスのヘッダーを表現しています。ヘッダー情報への問い合わせや、結果による振る舞いの選択が可能です。
-
{{domxref("Request")}}
+
{{DOMxRef("Request")}}
リソースのリクエストを表します。
-
{{domxref("Response")}}
+
{{DOMxRef("Response")}}
リクエストに対するレスポンスを表します。
-

Fetch ミックスイン

- -
-
{{domxref("Body")}}
-
レスポンスとリクエストの本体に関係するメソッドが定義されています。これらを利用することで、コンテントタイプ自身と、コンテントタイプごとの処理を定めることが可能になります。
-
- -

仕様書

+

仕様書

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

ブラウザーの互換性

- - +

ブラウザーの互換性

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

-

関連情報

+

関連情報

-- cgit v1.2.3-54-g00ecf