fetch
fetchとは何か
fetchはJavascriptの標準組み込み関数の1つである。
そしてfetch関数の役割は、外部からデータを引っ張ってくること。
作っているサイト・アプリに必要な外部データを取得するのに使える関数がfetch。
fetchの概念理解はこの動画が分かりやすい。
基本の書き方は以下の通り。
fetch("取りたいデータのURL") //データの状態と結果をPromisオブジェクトとして取得
.then((res) => res.json()) //結果だけをjson形式で変数[res]に格納
.then((data) => console.log(data)); //データを処理
.catch(error => console.log(error)); //どっかでエラーが起きた場合の処理 ※無くてもOKまず、最初の行で取ってきたデータはPromisオブジェクトという形式になっている。
Promisオブジェクトには状態(取得成功or失敗)と、結果(取得したデータ)が入っている。
2行目でPromisオブジェクトの結果だけを、変数に格納する。
データはjson形式のことが多いが、txtなどの形式で格納することも可能。
3行目で取ってきたデータを好きに処理する（今回はconsole.logで出力するだけ）
async/awaitを使った書き方
また、fetchには違う書き方もある。意味は同じ。
//async/awaitを使った書き方
async function fetchData() {
const res = await fetch("取りたいデータのURL");
const data = await res.json();
}
fetchData();関数の前にasyncを付けることで、非同期関数にすることができる。
awaitを書いた関数は、順番（同期的）に実行される。
非同期通信（非同期処理）
fetch関数は非同期通信（非同期処理）という特徴がある。
まず、同期通信というのはJavascriptの基本的な関数の仕様で、前の処理が全て終わってから次の処理が始まるというもの。
非同期通信はそれをせず、fetch関数の処理が完了する前に他の処理も同時進行で動く。
そして、fetch関数の方が終わるのが遅ければ、結果も最後に出力される。
fetchはデータ送受信をするので、その時間で他の処理が遅れることが無いようにするための仕様。
Fetch APIとは
fetch関数を用いてデータを受け取ることができるAPIがfetch API。
fetch APIのメソッドがfetch関数。
分かりにくいならfetch関数≒fetch APIと考えてOK
コメント