みんなに教えてもらって覚えたfetch(JavaScript-Fetch API)

こんにちは。
本日は昨日理解したてほやほやのFetchAPIについて記事を書いていこうと思います。

コードの確認

book.json

{"title":"JavaScript入門",
 "price":3000,
 "publisher":"◯◯社"}

これはサーバー側に用意されているデータです。
どうやら本のタイトル、値段、出版社の情報が入っていそうですね👀

fetch.js

fetch('book.json')
    .then(res =>{
        if(res.OK){
            return res.json();
        }
        throw new Error("エラーが発生しました。");
    })
   .then(data => console.log(data.title)) 
   .catch(e => window.alert(`確認してください。${e.message}`));

こちらではbook.jsonからデータを取得し、成功すればタイトルをコンソールに出力し、
失敗すれば「確認してください。エラーが発生しました。」というアラートを表示します。

ではひとつずつ見ていきましょう🙌

fetch.js

fetch('book.json')

fetchメソッドでbook.jsonをもってきます
　　

fetch.js

.then(res =>{
        if(res.OK){
            return res.json();
        }
        throw new Error("エラーが発生しました。");
    })

ここで１回目の.thenメソッドが出てきます。

thenメソッドとはPromiseオブジェクトに渡されたコールバック関数の処理結果を取得するインスタンスメソッドです

と言われても難しいので、一旦スルーして中の処理を見てみましょう。
上記はアロー関数を使用して記述されていますが、アロー関数を使わずに書くと以下のようになります。
　　

fetch.js

.then(function(res) {
    if (res.ok) {
        return res.json();
    }
    throw new Error("エラーが発生しました。");
})

　　
そう、実は「(res =>」のresは無名関数(関数名が特に定義されていない状態)に渡している引数なのです。
resはfetchが返すResponseオブジェクトで、if文の条件(res.ok)はリクエストが成功したことを示しています。
つまりこのif文の前半は、
　　
もしリクエストが成功したら、json形式でレスポンスを返す
　　
ということが書かれています。
　　

json形式でレスポンスが返ってくるので、返ってくる値はオブジェクトとして利用できる形式になります。
{"title":"JavaScript入門" → {title:" JavaScript入門"
　　
そして、リクエストが失敗した時の処理は
throw new Error("エラーが発生しました。");
new Error(message)で()内の文字列をエラーメッセージとしてもつエラーオブジェクトを作成します。

だいぶ長くなってしまいましたがここから後半戦です！

fetch.js

   .then(data => console.log(data.title)) 
   .catch(e => window.alert(`確認してください。${e.message}`));

前半のthenの処理が成功すると次のthenの処理に、処理失敗してthrowの処理を行った場合はcatchの処理に進みます。
上記の「(data =>」、「(e =>」の部分も先ほど登場した「(res =>」と同様に無名関数の引数として渡されています。
引数として任意のわかりやすい名前をつけているだけなので、極論「(x =>」とかでも動作するということです。

【リクエストが成功した場合】

.then(data => console.log(data.title)

この引数dataには、1つ前のthenの処理の結果が渡されます。
今回の場合はレスポンスをjson形式で取得した下記のオブジェクトですね。
{ title: "JavaScript入門", price: 3000, publisher: "◯◯社" }

つまり、
「リクエストが成功した場合はデータをオブジェクトとして受け取り、その中のタイトルをコンソールに表示する」
という処理をしています。
コンソールには「JavaScript入門」と表示されるはずです。

【リクエストが失敗した場合】

.catch(e => window.alert(`確認してください。${e.message}`));

この引数eには、throwの処理の結果が渡されます。
今回の場合はエラーメッセージをもつErrorオブジェクトを作成しましたね。
throw new Error("エラーが発生しました。");

つまり、
「リクエストが失敗した場合はErrorオブジェクトを作成し、window.alertメソッドでブラウザにErrorメッセージを表示する」
という処理をしています。
ブラウザのダイアログには「確認してください。エラーが発生しました。」と表示されるはずです。
　　
＊messageプロパティについては別途こちらを読んでみてください！

まとめ

今回は私がなかなか理解できず、先輩方にたくさん教えてもらってやっと理解できたので忘れないうちにアウトプットしようと思い記事にしてみました。
正しいかはわからないですが、私の中の超簡単にしたイメージは

fetch(カレーのレシピ)
   .then(材料 =>{
       if(材料があったら){
           return 材料をカット;
       }
       throw (必要な材料をメモする);
   })
  .then(ここにカットされた材料が渡される => 材料を炒めてカレーをつくる) 
  .catch(ここに材料メモが渡される => じゃがいも買ってきて〜😢と伝える);

みたいな感じです。
(あくまでも私が覚えやすいかな…？と思ったイメージなのでもっといいものがあったらぜひ教えてください)
かなり長文になってしまいましたが、最後まで読んでいただきありがとうございました🫖