fetch를 이용하여 Json 정보를 얻다.
프로미스를 모르고 빠져서 메모로 남긴 거야.
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();

결실