Fetch の基本概念

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

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

概要

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

サービスワーカーは、 Fetch を多用する API の一例です。

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

ガード

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

新しい Headers オブジェクトが Headers() コンストラクターを使用してが生成されるとき、ガードは none (既定値)に設定されます。Request または Response オブジェクトが生成された場合、関連づけられた Headers オブジェクトのガードは下記のとおり設定されます。

新しいオブジェクト型 コンストラクター 関連する Headers オブジェクトのガード設定
Request Request() request
Request()modeno-cors を設定したもの request-no-cors
Response Response() response
error() または redirect() メソッド immutable

ヘッダーのガードは、ヘッダーの内容を変更する set() (en-US)delete()append() の各メソッドに影響します。 Headers のガードが immutable の場合、変更しようとすると TypeError が発生します。しかし、次の場合は動作します。