Closed22

[キャッチアップ] fetch API

shingo.sasakishingo.sasaki

サポートブラウザ

モダンブラウザはすべて対応済み。
また、Node.js でも 18.0.0 から概ねサポートしているため、 axios 同様にブラウザと Node それぞれで同じコードを動作させることが出来る。

shingo.sasakishingo.sasaki

概要

fetch() はグローバルのメソッドで、ネットワークからリソースを取得するプロセスを開始し、レスポンスが利用できるようになったら履行されるプロミスを返します。

このプロミスはそのリクエストに対するレスポンスを表す Response で解決します。

shingo.sasakishingo.sasaki

Response は Readable Stream の形でボディにアクセス可能なのがポイントっぽい。
必要に応じてストリームをフェッチして任意のデータ形式で取得できるので無駄がない。

shingo.sasakishingo.sasaki

fetch() のプロミスはネットワークエラーが発生した場合（普通は権限の問題があったときなど）のみ拒否されます。 fetch() のプロミスは HTTP エラー（404 など）では拒否されません。代わりに、 then() ハンドラーで Response.ok や Response.status プロパティをチェックする必要があります。

shingo.sasakishingo.sasaki

axios と違って 4xx エラーなんかが発生しても Promise は resolve されるみたい。
個人的にはここは上手いこと隠蔽して 2xx 系のみ resolve してほしいかなぁ。

shingo.sasakishingo.sasaki

WindowOrWorkerGlobalScope は Window と WorkerGlobalScope の両方で実装されています。これはつまり fetch() メソッドは、リソースを取得したいと思うような大部分コンテキストで使用可能ということです。

shingo.sasakishingo.sasaki

window はわかるけど、 WorkerGlobalScope ってことは ServiceWorker 上でもグローバルに参照できるって話かな。

まぁ Node も含めてどこでもグローバル参照できるよぐらいの認識でいいか。

shingo.sasakishingo.sasaki

fetch() メソッドは取得するリソースのディレクティブではなく、コンテンツセキュリティポリシーの connect-src ディレクティブによって制御されます。

shingo.sasakishingo.sasaki

connect-src は CSF のディレクティブの一種で、fetch API などスクリプトインタフェースを使用して読み込める URL を制限するディレクティブ。

レスポンスヘッダーに

Content-Security-Policy: connect-src https://example.com/

が含まれている場合、スクリプトからは https://example.com ドメインにしかリクエストできない。

https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src

shingo.sasakishingo.sasaki

まぁ CORS を使用しないサイトなら、自サイトだけを指定しておくのが無難なのかな。

shingo.sasakishingo.sasaki

構文

fetch(resource)
fetch(resource, options)

shingo.sasakishingo.sasaki

シンプルだねぇ。流石にラッパーライブラリかませたくなっちゃう。

shingo.sasakishingo.sasaki

resource

以下のいずれか

  • URL を表す文字列または文字列化できるオブジェクト(URL など)
  • Request オブジェクト
shingo.sasakishingo.sasaki

options

ドキュメントだと options じゃなくて init って名前になってる。
基本的には Request オブジェクトの内容と近い用に見える。

shingo.sasakishingo.sasaki
  • method: HTTPメソッド
  • headers: HTTPヘッダー
  • body: リクエストボディ
  • mode: CORS を使用するかのモード
    • same-origin: 同一オリジンリクエスト限定にする
    • cors: クロスオリジンリクエストを使用する
    • no-cors: CORS セーフなメソッド、ヘッダーの使用のみに制限する
    • navigate: ページ遷移専用モード
  • credentials: クレデンシャルを送信するか
    • omit: 常にクレデンシャルを除外する
    • same-origin: クロスオリジンリクエストの場合、クレデンシャルを除外する
    • include: クレデンシャルを除外しない
  • cache: ブラウザのキャッシュをどう扱うか
    • default: 一致するキャッシュを探して利用する
    • no-store: キャッシュを使用せず、更新もしない
    • reload: キャッシュを使用せずに、更新はする
    • no-cache: キャッシュを利用はするが、条件付きリクエストをサーバーに常に送信する
    • force-cache: キャッシュが古かったとしても構わず使用する
    • only-if-cached: force-cache に加え、キャッシュがなかった場合はエラーにする
  • redirect: リダイレクトレスポンスの取り扱い
    • follow: 従う
    • error: エラーにする
    • manual: 別のコンテキストで処理する
  • referrer: リファラ文字列の指定
  • referrerPolicy: リファラを送信するポリシー
    • no-referrer: 常に送信しない
    • no-referrer-when-downgrade: HTTPS から HTTP への遷移の場合は送信しない
    • same-origin: 同一オリジンの場合のみ送信する
    • origin: オリジン文字列のみを送信する
    • origin-when-cross-origin: 同一オリジンにはすべて送信し、クロスオリジンにはオリジン文字列のみ送信する
    • strict-origin: 同一オリジンかつプロトコルも一致する場合のみ送信する
    • strict-origin-when-cross-origin: strict-origin + origin-when-cross-origin
  • integrity: 取得したリソースとそのハッシュ値が一致することを検証するようのハッシュ値
  • keepAlive: 接続を保持し続けるか
  • signal: AbortSignal オブジェクト。通信を中断するために使用する。

MDN だけだとわからなかった部分は仕様書を読む。
https://fetch.spec.whatwg.org/#fetch-method

shingo.sasakishingo.sasaki

例外

エラーが発生するのは以下の場合

  • AbortController によるリクエストの中止
  • リクエストの型が不正
  • ネットワークレベルのエラー
このスクラップは2023/01/18にクローズされました