Udemyでfetch APIについてさらに詳しく勉強をしました😌
XMLの作り方を流し見をし、promiseをサポートしていないことを知る
⇓
fetchを実際に作る
⇓
YouTube動画で、Node.jsで天気アプリを作る
という順番で進めます✨
fetchで勉強したことを簡単にまとめます💡
fetch
fetchはWebAPIにリクエストを送り、データを取得するためのJavaScriptの関数。
簡単に言えば、fetch APIを使うときは、データを取得するのが終わるまで待ってくれるpromiseがあって、もし何か問題があればエラーを捕まえてくれるcatchがある!
🌸promise
promiseは「これから何か作業をするよ」という約束みたいなもの。
作業がうまくいったら、「はい、できたよ!」と教えてくれて、何か問題があったら、「ごめんね、うまくいかなかったよ」と教えてくれるようなもの。
fetchをすると、サーバーからデータが届くまで待って、その後に何かをすることを約束してくれる。
🌸then
何かの作業が終わったあとに、次に何をするかを決めるために使うもの。
fetchを使って情報を取ってきた後に、その情報を使って何かをするときにthenを使う
🌸catch
キャッチは、もし何かがうまくいかなかったときに、そのエラーをキャッチ(捕まえる)する手段。
エラーが起きたら、catchで指定した処理をする。
(「ここで問題があったよ」と教えてくれる役割をする)
🌸asyncとawaitの違い
- async
「この関数は特別で、時間がかかるかもしれないよ」と教えてくれるマーク。
これがついてる関数は、他のことをしながら待てる。
- await
「ここでちょっと待ってね」という合図で、asyncでマークされた関数の中で使う。
これを使うと、その部分で時間がかかる作業が終わるまで、ちゃんと待ってくれる。
🌸try
プログラムで何かを試してみるときに使う部分。
この中に書かれたコードは、エラーが起きる可能性があるけど、もしエラーが起きたら、プログラムが止まらないようにしたいときに使う。
もしtryブロックの中で何か問題が起きたら、プログラムはすぐにcatchブロックに移動する。
そしてcatchブロックが、その問題をどうにかするためのコードを実行する。
今回はローカル上のみに出力しました😆
近々ローカル上でサーバーをつなげ、HTMLやCSSでレイアウトをしてアプリケーションを作っていきます😉
明日は、『非同期処理』を進めていきます!!