From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../ja/web/api/fetch_api/basic_concepts/index.html | 74 ++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 files/ja/web/api/fetch_api/basic_concepts/index.html (limited to 'files/ja/web/api/fetch_api/basic_concepts') diff --git a/files/ja/web/api/fetch_api/basic_concepts/index.html b/files/ja/web/api/fetch_api/basic_concepts/index.html new file mode 100644 index 0000000000..08595035d6 --- /dev/null +++ b/files/ja/web/api/fetch_api/basic_concepts/index.html @@ -0,0 +1,74 @@ +--- +title: Fetch の基本コンセプト +slug: Web/API/Fetch_API/Basic_concepts +tags: + - API + - Fetch + - Fetch API + - XMLHttpRequest + - concept + - guard + - request +translation_of: Web/API/Fetch_API/Basic_concepts +--- +

{{DefaultAPISidebar("Fetch API")}}{{draft}}

+ +
+

Fetch は、(ネットワークを超えて)リソースを取得するインターフェイスを提供します。 {{domxref("XMLHttpRequest")}} を使っていた人には馴染み深いでしょうが、より拡張可能で効果的な機能があります。この記事は、Fetch API の基本コンセプトのいくつかを説明します。

+
+ +
+

この記事は随時加筆されます。より良い説明が必要な Fetch コンセプトを見つけた場合、MDN ディスカッションフォーラム か Matrix の MDN WebDocs ルームで誰かに知らせてください。

+
+ +

概要

+ +

Fetch の核心はインターフェイスの抽象化であり、HTTP {{domxref("Request")}}、{{domxref("Response")}}、{{domxref("Headers")}}、{{domxref("Body")}} のペイロード、そして非同期リソースリクエストの初期化のための {{domxref("GlobalFetch.fetch","global fetch")}} メソッドがその対象です。HTTP の主要コンポーネントが JavaScript オブジェクトとして抽象化されているため、他の API からそれらの機能を利用しやすくなっています。

+ +

Service Worker は Fetch を多用する API の一例です。

+ +

Fetch はそれらのリクエストの非同期な性質をもう一歩先へ進めるものです。API は完全に {{jsxref("Promise")}} ベースです。

+ +

ガード

+ +

ガードは {{domxref("Headers")}} オブジェクトの機能で、ヘッダーが使用されている場所に応じて immutable、request、request-no-cors、response、none の値をとります。

+ +

{{domxref("Headers.Headers","Headers()")}} の {{glossary("constructor", "コンストラクター")}} を使用して新しい {{domxref("Headers")}} オブジェクトが生成されるとき、ガードは none に設定されます（既定の動作）。{{domxref("Request")}} オブジェクトか {{domxref("Response")}} オブジェクトが生成された場合、関連づけられた {{domxref("Headers")}} オブジェクトのガードは下記のとおり設定されます：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
新しいオブジェクト型コンストラクター関連する {{domxref("Headers")}} オブジェクトのガード設定
{{domxref("Request")}}{{domxref("Request.Request","Request()")}}request
no-cors の {{domxref("Request.mode","mode")}} を設定した {{domxref("Request.Request","Request()")}}request-no-cors
{{domxref("Response")}}{{domxref("Response.Response","Response()")}}response
{{domxref("Response.error","error()")}} メソッドか {{domxref("Response.redirect","redirect()")}} メソッドimmutable
+ +

ヘッダーのガードは、ヘッダーのコンテンツを変更する {{domxref("Headers.set","set()")}} メソッドと {{domxref("Headers.delete","delete()")}} メソッド、{{domxref("Headers.append","append()")}} メソッドに影響します。ガードが immutable の {{domxref("Headers")}} を修正しようとした場合、 TypeError をスローします。しかし、次の場合は動作します：

+ + -- cgit v1.2.3-54-g00ecf