Javascript (React_fetchのサンプル)

■fetch関数の試し。
Reactの参考書を借りて少し読んだらfetch関数に目が止まった。外部APIを使ってjsonデータの取得をすれば、そういう公開をしているサイトからデータ取得できるので利用の幅は広いと思う。今回、python -m http.server でサーバを立てて、そこのjsonデータにアクセス。

まず、Reactのコード。

import { useEffect, useState } from "react";

//===Loading...を表示させるためのsleep========
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));

export default function FetchSample() {
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        fetch("/data.json")
            .then(res => {
                if (!res.ok) throw new Error("Network error");
                return res.json();
            })
            //===================================
            .then(json =>
                sleep(3000).then(() => json)
            )
            //===================================
            .then(json => setData(json))
            .catch(err => setError(err.message));
    }, []);

    if (error) return <div>Error: {error}</div>;
    if (!data) return <div>Loading...</div>;

    return (
        <div>
            <h3>{data.message}</h3>
            <ul>
                {data.items.map(v => (
                    <li key={v}>{v}</li>
                ))}
            </ul>
        </div>
    );
}

次にjsonデータ。

{
  "message": "Hello from http.server",
  "items": [1, 2, 3, 4]
}

これらをコマンドプロンプトから実行させた結果が下（Chromeブラウザ）。まず、初めに描画された瞬間はdataが初期値のnullになっているので、Loading...の表示。

sleepで指定した3秒が経過したら、fetchで取得したデータがsetDataで更新されるのでここで再描画される。jsonデータが表示されていることが分かる。

Open-MeteoとかのフリーのAPIのURLに設定しても問題なく情報は取得できた。