XMLHttpRequestをfetch・async/awaitに書き換える

JSONを得るのにXMLHttpRequestを使っているが、非同期処理ができるfetch・async/awaitに書き換えるいまでも困ってはいないが、いつかより大きいデータを扱うようになったときの処理速度を考慮すると、早めに対応しておくのがベターかと。

以下のHTMLとJSを参考にする

HTML: <script type="module" src="./tmp_script.js">

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch Elements Test</title>
</head>

<body>
    <h1>Fetch Elements Test</h1>
    <p>consoleを確認</p>

    <!-- 外部モジュールスクリプトの読み込み -->
    <script type="module" src="./tmp_script.js"></script>
</body>

</html>

let elements = null;

async function fetchElements() {
    if (elements) return elements;
    try {
        const response = await fetch("https://gist.githubusercontent.com/akikuno/831ec21615501cc7bd1d381c5e56ebd2/raw/a5e224c8ef258a4329708d7070986aaf831c0a05/gist_Rab10.json");
        if (!response.ok) throw new Error("Network response was not ok");
        elements = await response.json();
        return elements;
    } catch (error) {
        console.error("Fetch error:", error);
        return null;
    }
}

elements = await fetchElements();
console.log(elements);

akikuno / TSUMUGI

XMLHttpRequestをfetch・async/awaitに書き換える #28