fetchでapi（Json情報）を取得

fetchを利用してJson情報を取得します。
Promiseがわかってなくてはまってしまったので、備忘録として残します。

API開発時に役立つJSONPlaceholder - Free Fake REST APIを利用。
何種類かリソースが用意をされておりますが、今回はUSER情報（https://jsonplaceholder.typicode.com/users）
を使用させてもらいます。

JSONPlaceholder

実装

<h1>fetch</h1>
<h2>名前情報を取得</h2>
<ul id="name_box">
</ul>

let name_box = document.getElementById("name_box");

function getJson(){
    fetch("https://jsonplaceholder.typicode.com/users/")
        .then(response => response.json())
        //response.json()をusersとして扱います
        .then(users => {

        //取得したユーザー情報をイテレートしてhtmlに出力
        for(user of users){
            var list = document.createElement('li');
            list.innerHTML = user.name;
            name_box.appendChild(list);
        }
    });
};

getJson();

結果

async awaitに書き換えてみよう

実装

<ul id="name_box2">
</ul>

let name_box2 = document.getElementById("name_box2");

async function getJson2(){
    const res2 = await fetch("https://jsonplaceholder.typicode.com/users/");
    //console.log(res2);
    const users2 = await res2.json();
    //console.log(user2);

    //取得したユーザー情報をイテレートしてhtmlに出力
    for (user2 of users2) {
        var list2 = document.createElement('li');
        list2.innerHTML = user2.email;
        name_box2.appendChild(list2);
    }
}

getJson2();

結果