フェッチの基本概念
フェッチ API は、(ネットワーク越しの場合も含めて)リソースを取得するインターフェイスを提供します。 XMLHttpRequest
を使っていた人にはなじみ深いでしょうが、より強力で柔軟な機能を提供します。この記事では、フェッチ API の基本概念のいくつかを説明します。
メモ: この記事は随時加筆されます。もっと説明が必要と感じるフェッチの概念を見つけた場合、MDN ディスカッションフォーラムまたは Matrix の MDN Web Docs ルームで誰かに知らせてください。
概要
フェッチの核心はインターフェイスの抽象化であり、HTTP のリクエスト (Request
)、レスポンス (Response
)、ヘッダー (Headers
) を抽象化するインターフェイスであり、非同期のリソースのリクエストを行うための fetch()
メソッドで行います。 HTTP の主要部分が JavaScript オブジェクトとして抽象化されているため、他の API からそれらの機能を利用しやすくなっています。
サービスワーカーは、フェッチを多用する API の一例です。
フェッチはそれらのリクエストの非同期な性質をもう一歩先へ進めるものです。 API は完全に Promise
ベースです。
ガード
ガードは Headers
オブジェクトの機能で、ヘッダーが使用されている場所に応じて immutable
, request
, request-no-cors
, response
, none
のいずれかの値を取ります。
新しい Headers
オブジェクトが Headers()
コンストラクターを使用してが生成されるとき、ガードは none
(既定値)に設定されます。 Request
または Response
オブジェクトが生成された場合、関連づけられた Headers
オブジェクトのガードは下記のとおり設定されます。
新しいオブジェクト型 | コンストラクター | 関連する Headers オブジェクトのガード設定 |
---|---|---|
Request |
Request() |
request |
Request() で mode に no-cors を設定したもの |
request-no-cors |
|
Response |
Response() |
response |
error() または redirect() メソッド |
immutable |
ヘッダーのガードは、ヘッダーの内容を変更する set()
、 delete()
、append()
の各メソッドに影響します。 Headers
のガードが immutable
の場合、変更しようとすると TypeError
が発生します。しかし、次の場合は動作します。
- ガードが
request
で、ヘッダーの name が禁止ヘッダー名 ではない場合。 - ガードが
request-no-cors
で、ヘッダーの name/value が単純ヘッダーである場合。 - ガードが
response
で、ヘッダーの name が禁止レスポンスヘッダー名ではない場合。