fetch apiをあらためて 2

前回のふりかえり

前回は MDN fetchからfetch, promiseの概要について触れた.

promiseを使うと, 簡潔に非同期処理を記述できる.
fetch apiを使うことでわかりやすくhttp req/respの操作を行える.

今回もMDN fetch api を読んでいこう.

リクエストにオプションを適用する

fetch()メソッドには2つ目の引数を適用することもできます。
多数の設定をコントロールすることのできる初期化オブジェクトです。

// Example POST method implementation:
postData('http://example.com/answer', {answer: 42})
  .then(data => console.log(data)) // JSON from `response.json()` call
  .catch(error => console.error(error))

function postData(url, data) {
  // Default options are marked with *
  return fetch(url, {
    body: JSON.stringify(data), // must match 'Content-Type' header
    cache: 'no-cache', // *default, cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *omit
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    method: 'POST', // *GET, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *same-origin
    redirect: 'follow', // *manual, error
    referrer: 'no-referrer', // *client
  })
  .then(response => response.json()) // parses response to JSON
}

http://example.com/answer に対して {answer: 42} というjsonをpostするコードである. fetchの第2引数にhttp requestの設定を書くことができる.

json形式で記述できるためかなり簡潔で読みやすい. ここに記述されるパラメタはRequest インタフェースのプロパティに対応する.

credentials, mode, redirectについて見ていこう

credentials

リクエストのクレデンシャルを設定する.
クロスオリジンリクエストの場合, UAがほかのドメインからクッキーを送信すべきかどうかを示す.

omit : 決してクッキーを送信しない
same-origin: URLが呼び出し元のスクリプトと同一オリジンだった場合のみクッキーを送信する
include: クロスオリジンの呼び出しであっても常にクッキーを送信する

mode

クロスオリジンリクエストに対して有効なレスポンスができるか,
またレスポンスのプロパティが読み取り可能かどうかを判定するために使用される.

same-origin: リクエストが常に同一オリジンに行われることを保証するために使用できる. このモードを設定して他のオリジンにリクエストをした場合, 結果は単純にエラーになる.
cors: クロスオリジンリクエストを許可する. 例えば, サードパーティーベンダーが提供する様々なAPIにアクセスできる. これらはCORSプロトコルに乗ることが期待されている.
no-cors: HEAD, GET, POST以外のメソッドを防ぐ. 任意のServiceWorkersがこれらをインターセプトする場合, これら