See the Elephant

渋谷でWebプログラマをやっている25歳が書く日常ブログ

fetch apiをあらためて 3

前回の振り返り

前回は, fetchの第2引数としてrequestのパラメタを設定する方法について触れた.

Responseオブジェクト

Responseインスタンスは, fetch()プロミスが解決(resolve)された時に返り値として渡される. どんなレスポンスオブジェクトでも共通で使用できるレスポンスプロパティを持つ

  • Response.status
  • Response.statusText
  • Response.ok
    • HTTPステータスが200~299のうちに収まっているかどうかのショートハンド. Booleanを返す

Response()コンストラクタはオプションとして2つの引数をとることができる - レスポンスボディと初期化オブジェクトです(requestが受け取れるものと似ている)

Body

リクエストもレスポンスもボディを持っている bodyは以下のタイプのいずれかのインスタンスである

  • ArrayBuffer
  • ArrayBufferView
  • Blob/File
  • 文字列
  • URLSearchParams
  • FormData

BodyミクスインはRequestやResponseに実装されている コンテンツを抜き出すために以下のメソッドが定義されている
以下は全て最終的に実際の中身で解決されるプロミスを返す

  • arrayBuffer(): 固定長のバイナリデータを持つbufferを完全に読み取る
  • blob(): ファイルに似たオブジェクト. immutableな生データをResponseストリームから完全に読み取る
  • json(): ボディテキストをJsonとして解析した結果で解決されるpromiseを返す
  • text(): textで解決するpromiseを返す. 常にUTF-8でデコードされる
  • formData(): XHR.send()を用いることで簡単に送信が可能なフォームフィールドおよびそれらの値から表現されるキーと値のペアのセットで解決されるpromiseを返す

きになるキーワード

service worker: https://developer.mozilla.org/ja/docs/Web/API/ServiceWorker_API cors: https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control