新卒エンジニア2ヶ月目。
Fetchについて理解が足りないので少し勉強した。
ド素人なりに、「こんなのもわからないのか」的なレベルから書く。
そもそもFetchってなに？
Fetchの日本語訳は「取ってくる」とか「引き出す」とかいう意味。
MozillaのFetch概説https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetchにはこう書かれている。
fetch() から返される Promise は レスポンスが HTTP 404 や 500 を返していても HTTP エラーステータスを拒否しません。その代わりに正常に解決し (ok ステータスは false にセットされます)、そしてネットワークの失敗または何かがリクエストの完了を妨げた場合のみに拒否するでしょう。
ん？Promise？広瀬香美かな？
とりあえず非同期処理とかメソッドチェーンができるとか便利だっていうことはこれhttps://qiita.com/toshihirock/items/e49b66f8685a8510bd76を読んでなんとなく理解した。
できれば別記事でまとめておきたい。
とりあえずFetchリクエストを投げるとPromiseでレスポンスが返ってくるらしい。
Fetchのサンプルコード
Fetch概説のサンプルコードがこれ。
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
多くのサイトで「thenなんてわかって当たり前でしょ」となっていたので一応書く(自分でもふわっとしている)。
thenについて
こちらのブログhttps://liginc.co.jp/344056が読んでてわかりやすかったので引用。
promiseオブジェクトは、 then() と catch() という2つのメソッドを持っており、promiseオブジェクト内部の状態が Fulfilled になると、 then() メソッドのコールバックが呼ばれ、逆に Rejected になると catch() メソッドのコールバックが呼ばれます。
つまり、実質的に new Promise() のコールバック内で resolve() を実行すれば then() メソッドのコールバックが呼ばれ、 reject() を実行すれば catch() メソッドが呼ばれるということです。
Promiseオブジェクト内部の状態については同ブログより
- Fulfilled – コールバック関数内でresolve()が呼ばれた時
- Rejected – コールバック関数内でreject()が呼ばれた時
- Pending – 初期状態
とある。つまりPendingの初期状態から、
- resolveメソッドが呼ばれた場合、状態がFulfilledへ遷移し、thenメソッドのコールバックが呼ばれる
- rejectメソッドが呼ばれた場合、状態がRejectedへ遷移し、catchメソッドのコールバックが呼ばれる
という風に解釈できる。
ということはサンプルコードにcatchコールバックを追加するには
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
})
.catch(function(error) {
console.log(error);
});
という風に書けば良いはず。