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がこれらをインターセプトする場合, これら
redirect
リダイレクトがどのようにハンドリングされるかを設定する.
デフォルトは follow
.
今日はここまで