学んでいた中で結構面倒に感じたので、復習がてら記述する。
fetch関数とは
簡単に言うと、「公開されているAPIから、画像やデータを取得する」ための関数。
そこら辺の説明はいろんな人が説明してくれているので省略する。
【JavaScript】初めて学ぶ！fetch()メソッドと非同期通信 | BREEZE
基本的な使用例
fetch('取得したい外部APIのURLを記入する')
.then(response => response.text())
.then(text => {
console.log(text);
});
fetch()の返り値はPromiseを用いているため、Promiseがわからない場合は先にそちらを学んでほしい。ほとんどのwebサイトで.then()についても同時に説明されている。
【JavaScript】初心者にもわかるPromiseの使い方｜TECH PLAY Magazine ［テックプレイマガジン］
以下、自身がよくわからなくて詰まっていた箇所を書いていく。
「○○.status」とは？
勉強していくうちに、if(○○（作成者それぞれの関数定義）.status === "success")というコードを見るようになった。
帰ってきた内部データを参照しているのはわかるのだが、statusが何を参照しているのかわからない。
fetch("外部APIのURL")
.then(response => response.json())
.then(data => {
if(data.status === "success"){
処理
}
}
というわけで調べたら、○○.statusにはHTTPステータスコードが入っていることがわかった。
以下URL先にfetch関数返り値の他プロパティも記載されているのでよかったらどうそ。