From 6211f4e2e5b93657cc47aa2e9e82d2b1921188a1 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 15 Jan 2022 19:54:58 +0900 Subject: 2021/09/15 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/fetch_api/basic_concepts/index.md | 98 +++++++++++----------- 1 file changed, 49 insertions(+), 49 deletions(-) (limited to 'files/ja/web/api/fetch_api') diff --git a/files/ja/web/api/fetch_api/basic_concepts/index.md b/files/ja/web/api/fetch_api/basic_concepts/index.md index 08595035d6..b00f3f357c 100644 --- a/files/ja/web/api/fetch_api/basic_concepts/index.md +++ b/files/ja/web/api/fetch_api/basic_concepts/index.md @@ -1,74 +1,74 @@ --- -title: Fetch の基本コンセプト +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}}

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

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

-
+[Fetch](/ja/docs/Web/API/Fetch_API) は、（ネットワーク越しの場合も含めて）リソースを取得するインターフェイスを提供します。 {{domxref("XMLHttpRequest")}} を使っていた人にはなじみ深いでしょうが、より強力で柔軟な機能を提供します。この記事では、 Fetch API の基本概念のいくつかを説明します。 -
-

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

-
+> **Note:** この記事は随時加筆されます。より良い説明が必要な Fetch 概念を見つけた場合、[MDN ディスカッションフォーラム](https://discourse.mozilla-community.org/c/mdn) か [Matrix](https://wiki.mozilla.org/Matrix) の [MDN Web Docs](https://chat.mozilla.org/#/room/#mdn:mozilla.org) ルームで誰かに知らせてください。 -

概要

+## 概要 -

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

+Fetch の核心はインターフェイスの抽象化であり、HTTP のリクエスト ({{domxref("Request")}})、レスポンス ({{domxref("Response")}})、ヘッダー ({{domxref("Headers")}}) を抽象化するインターフェイスであり、非同期のリソースのリクエストを行うための {{domxref("fetch()")}} メソッドで行います。 HTTP の主要部分が JavaScript オブジェクトとして抽象化されているため、他の API からそれらの機能を利用しやすくなっています。 -

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

+[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)は、 Fetch を多用する API の一例です。 -

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

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

ガード

+## ガード -

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

+ガードは {{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("Headers.Headers","Headers()")}} {{glossary("constructor", "コンストラクター")}}を使用してが生成されるとき、ガードは `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")}} オブジェクトのガード設定 +
{{domxref("Request")}}{{domxref("Request.Request","Request()")}}request
+ {{domxref("Request.Request","Request()")}} で {{domxref("Request.mode","mode")}} に no-cors を設定したもの + 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 をスローします。しかし、次の場合は動作します：

+ヘッダーのガードは、ヘッダーの内容を変更する {{domxref("Headers.set","set()")}}、 {{domxref("Headers.delete","delete()")}}、{{domxref("Headers.append","append()")}} の各メソッドに影響します。 {{domxref("Headers")}} のガードが `immutable` の場合、変更しようとすると `TypeError` が発生します。しかし、次の場合は動作します。 - +- ガードが `request` で、ヘッダーの _name_ が{{Glossary("forbidden header name", "禁止ヘッダー名")}} ではない場合。 +- ガードが `request-no-cors` で、ヘッダーの _name_/_value_ が{{Glossary("simple header", "単純ヘッダー")}}である場合。 +- ガードが `response` で、ヘッダーの _name_ が{{Glossary("forbidden response header name", "禁止レスポンスヘッダー名")}}ではない場合。 -- cgit v1.2.3-54-g00ecf