プレゼンテーションシナリオ: スライド128

スライド128では、Fetch APIを使用した実際の例について説明します。

a) JSON APIの呼び出し

async function loadPost() {
    let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    let data = await response.json();
    document.getElementById("result").innerHTML = 
        "<h3>" + data.title + "</h3><p>" + data.body + "</p>";
}

ここでは：

await fetch(...)がAPIを呼び出して、結果が返されるのを待ちます。
await response.json()がresponseをJSONデータに変換します。
その後、data.titleとdata.bodyをWebページに表示します。

b) textファイル（data.txt）の呼び出し

async function loadFile() {
    let response = await fetch("data.txt");
    let text = await response.text();
    document.getElementById("result").innerHTML = text;
}

ここでは：

await fetch("data.txt")がtextファイルを読み込みます。
await response.text()が内容をtext形式で取得します。
内容をWebページに表示します。

以上で、Fetch APIを使用してJSON APIを呼び出し、textファイルを読み込む2つの実際の例についての説明を終わります。