Fetch

Fetch

サーバーからデータやファイルを取得する際に使用するWebAPIの一種。
fetch関数は非同期処理になる。
以下はfetchの例。

async function myFetch() {
  const response = await fetch("sample.json");
  const data = await response.json();
  for (const { key, value } of data) {
    console.log(key + ":" + value);
  }
}
myFetch();

sample.json

[
    { "key": "apple", "value": "リンゴ" },
    { "key": "orange", "value": "オレンジ" },
    { "key": "melon", "value": "メロン" }
]

以下はfruit.jsonとfruit-tag.jsonからデータを取得して出力しています。

fruit.json

[
    {"key": "apple", "value": "りんご"},
    {"key": "orange", "value": "オレンジ"},
    {"key": "melon", "value": "メロン"}
]

fruit-tag.json

{
    "apple": [ "赤", "安い", "赤ずきんちゃん" ],
    "orange": [ "オレンジ", "安い" ],
    "melon": [ "緑", "高い" ]
}

// JSONファイルをフェッチして、オブジェクトへの変換まで行う関数
// thenの実行結果が戻り値となるため、Promiseインスタンスが返ります。
function fetchJSON(file) {
  return fetch(file).then((res) => res.json());
}

// メイン関数
// JSONファイルを取得して、指定のログを出力します。
async function main() {
  // ファイルの取得とJSONメソッドの実行
  // fruits, fruitTagsにはJSONがオブジェクトに変換された状態になります。
  const fruits = await fetchJSON("fruit.json");
  const fruitTags = await fetchJSON("fruit-tag.json");

  // fruitsは配列なのでfor...ofで反復処理を記述できます。
  // それぞれのオブジェクトのキー（key）と値（value）を取り出す。
  for (const { key, value } of fruits) {
    // keyでタグを取得
    const tags = fruitTags[key];
    // タグは配列のためjoinで文字列として結合
    const tagStr = tags.join(",");
    // ログ出力
    console.log(`${value}は次の特徴があります。（${tagStr}）`);
  }
}

// メイン関数の実行
main();