fetchでWEB APIからデータを取得する方法

投稿日:2022/09/25　最終更新日:2022/09/25

Table of Contents

fetchとは

XMLHttpRequest と同様に HTTPリクエストを行う API のことです。

つまりは、指定した URL を用いてHTTPリクエスト＝「この URL にある情報をちょうだい～」と WEBサーバーに送信をします。

それに対して、WEBサーバーは「あいよ～」と URL先にある「情報」を返してくれます。

その「情報」というものが例えば蔵書の一覧であったり商品の一覧であったりと何かの記録や一覧などの場合が多いです。

つまりはローカルの環境で作るのがめんどくさいじゃないですか？なんかの一覧を作るとか、、、

その面倒をかけずに「これを使ったらいいよ」みたいな形で優しい人たちがネット上に置いてくれているのが WEB API です。

なので、fetch はJavaScriptを使ってネット上にある WEB API たる情報や一覧を持ってきて利用するための技術の一つです。

さきほども上げた XMLHttpRequest よりも fetch のほうがシンプルで使い勝手が良いため使用される率が高いです。

const fetchFunction = () => {
  fetch("URLはココ", {
    method: "GET",
  }).then(res => res.json());
  .then(data => {
    console.log(data);
  })
};

書き方はいたってシンプルです。

今回は fetchFunction とテキトーな関数で囲っていますが、重要なのはその中身です。

fetch でまずは WEB API の URL を記載します。

それを HTTPリクエストするため、GET方式で取得します。

そして、取得した URLの情報を JSON形式で表示すると使い勝手が良いことが多いので、res.json() としています。

また、ここでは処理の順番を正確に行う必要があるので、.then を使用したメソッドチェーンで非同期処理をしています。

res.json() で JSON形式に変換された res を今度は data で取得すると見やすい形で API を出力することが出来るでしょう。