220504

try / catch 

 

예외 처리를 위한 문법 ( 실무에서는 예외 처리를 하는 것이 매우 중요함.)

 

 

await가 promise를 벗겨주면서 기다리게 함

 

 

async function getUsers() {

  /*

    fetch 함수를 이용해서 users 정보를 가져옵니다.

    최종적으로 호출될 URL : https://jsonplaceholder.typicode.com/users

  */

  const res = await fetch(`${HOST_NAME}/users`);

  const users = await res.json();

  console.log(users);

  let cnt = 0;

  // users = [ {}, {}, {} ]

  // user = {}

  for (let user of users) {

    console.log(user);

    /*

      아래와 같은 형태로 데이터를 tbody에 추가해주시면 됩니다.

      <tr>

        <th>1</th>

        <td>Leanne Graham</td>

        <td>Sincere@april.biz</td>

        <td>Romaguera-Crona</td>

      </tr>

      추가하는 방법은 createElement를 사용하셔도 좋고,

      innerHTML 방식으로 추가하셔도 좋습니다.

      저는 createElement를 이용해서 첫번째 컬럼(#)을 추가했습니다.

    */

    const tr = document.createElement("tr");

    const tdNum = document.createElement("th");

    const textNum = document.createTextNode(++cnt);

    tdNum.appendChild(textNum);

    tr.appendChild(tdNum);

    /*

      위에 추가한 것처럼 이름, 이메일, 회사명을 차례로 추가해봅시다!

    */

    const tdName = document.createElement("td");

    const textName = document.createTextNode(user.name);

    tdName.appendChild(textName);

    tr.appendChild(tdName);

    const tdEmail = document.createElement("td");

    const textEmail = document.createTextNode(user.email);

    tdEmail.appendChild(textEmail);

    tr.appendChild(tdEmail);

    const tdCompany = document.createElement("td");

    const textCompany = document.createTextNode(user.company.name);

    tdCompany.appendChild(textCompany);

    tr.appendChild(tdCompany);

    tbody.appendChild(tr);

  }

}