fetch를 async await으로 바꾸는 방법 (+try catch) - 블랙커피

KHW·2021년 2월 5일

Javascript 지식쌓기

목록 보기

24/95

블랙커피스터디의 코드를 작성한 내용

 function responseApi(){
    fetch(`${$baseUrl}api/users`)
        .then((response) => response.json())
        .then((myJson)=> {
            $userList.innerHTML = myJson.map(user => `
                <button class="ripple" id=${++$userCount}>${user.name}</button>
            `).join('');
            clickUser();
            $userList.append($userCreateButton);
            $userList.append($userDeleteButton);
            $userCreateButton.addEventListener('click',makeUser);
            $userDeleteButton.addEventListener('click',deleteUser);
        })
};

해당 코드는 fetch를 이용한 코드이다. 이를 async와 await을 이용해 바꿔보라고 하셔서 구글링을 바탕으로 바꾸어 보았다.

async await으로 고치기

내가 정리한 부분

async await을 사용할때 알아야 할 부분

(비동기함수를 포함하는 전체)함수에 async을 붙여준다.

비동기로 행동하는 부분에 대한 함수(delay)를 만들어준다. (await을 그 함수에 붙인다.)

resolve를 return으로 바꾸어 리턴처리한다.

이를 토대로 진행을 해보자

1. 함수에 async 붙이기

 async function responseApi(){
    fetch(`${$baseUrl}api/users`)
        .then((response) => response.json())
        .then((myJson)=> {
            $userList.innerHTML = myJson.map(user => `
                <button class="ripple" id=${++$userCount}>${user.name}</button>
            `).join('');
            clickUser();
            $userList.append($userCreateButton);
            $userList.append($userDeleteButton);
            $userCreateButton.addEventListener('click',makeUser);
            $userDeleteButton.addEventListener('click',deleteUser);
        })
};

2. 비동기로 행동하는 부분에 대한 함수(delay)를 만들어준다.

Promise를 리턴하는 delay역할을 하는 곳은 fetch부분 이므로 이를 분리시켜본다.

 async function responseApi(){
   const post = await delay();
   ....
};

function delay(){
  return fetch(`${$baseUrl}api/users`)
}

3. resolve내용은 따로 없으므로 받아오는 것을 반복해서 처리하는 역할을 수행해준다.


(myJson)=> {
            $userList.innerHTML = myJson.map(user => `
                <button class="ripple" id=${++$userCount}>${user.name}</button>
            `).join('');
            clickUser();
            $userList.append($userCreateButton);
            $userList.append($userDeleteButton);
            $userCreateButton.addEventListener('click',makeUser);
            $userDeleteButton.addEventListener('click',deleteUser);
        }

위의 코드의 역할은

function setUserName(myJson){
  $userList.innerHTML = myJson.map(user => `
                <button class="ripple" id=${++$userCount}>${user.name}</button>
            `).join('');
  clickUser();
  $userList.append($userCreateButton);
  $userList.append($userDeleteButton);
  $userCreateButton.addEventListener('click',makeUser);
  $userDeleteButton.addEventListener('click',deleteUser);
}

이렇게 새로 함수를 만들어 수행시킨다.

정리된 결과

async function responseApi(){
  try {
    const response = await delay();
    const post = await response.json();
    await setUserName(post);
  }
  catch(err){
    alert(err);
  }
};

function delay(){
  return fetch(`${$baseUrl}api/users`)
}

function setUserName(myJson){
  $userList.innerHTML = myJson.map(user => `
                <button class="ripple" id=${++$userCount}>${user.name}</button>
            `).join('');
  clickUser();
  $userList.append($userCreateButton);
  $userList.append($userDeleteButton);
  $userCreateButton.addEventListener('click',makeUser);
  $userDeleteButton.addEventListener('click',deleteUser);
}

추가내용

사실 delay함수를 따로 안만들어도 상관은 없다. 그러나 내가 헷갈려서 일단 만들어봄....

async function responseApi(){
  const response = await fetch(`${$baseUrl}api/users`)
  const post = await response.json();
  await setUserName(post);
};

function setUserName(myJson){
  $userList.innerHTML = myJson.map(user => `
                <button class="ripple" id=${++$userCount}>${user.name}</button>
            `).join('');
  clickUser();
  $userList.append($userCreateButton);
  $userList.append($userDeleteButton);
  $userCreateButton.addEventListener('click',makeUser);
  $userDeleteButton.addEventListener('click',deleteUser);
}

try catch 사용

fetch에서는 then으로 받으면서 catch로 error를 잡는 수행을 하였다.
async await에서는 try catch문을 이용한다.

async function responseApi(){
  try{
  	const response = await fetch(`${$baseUrl}api/users`)
  	const post = await response.json();
  	await setUserName(post);
  }
  catch(err){
    alert(err);
  }
};

function setUserName(myJson){
  $userList.innerHTML = myJson.map(user => `
                <button class="ripple" id=${++$userCount}>${user.name}</button>
            `).join('');
  clickUser();
  $userList.append($userCreateButton);
  $userList.append($userDeleteButton);
  $userCreateButton.addEventListener('click',makeUser);
  $userDeleteButton.addEventListener('click',deleteUser);
}

해당 await에서 문제가 발생하면 catch로 err를 처리한다.

총 정리

fetch함수는 XMLHttpRequest, JSON과 마찬가지로 AJAX를 위한 개념이다.

콜백지옥 싫다.

Promise를 이용하자.

fetch는 Promise와 관련된 일종의 개념이다.

fetch를 통해 then catch를 하며 비동기를 진행한다.

그런 fetch도 async await을 이용해 함수를 통해 좀 더 보기좋게 나타낼 수 있다.

async await을 통해 만들어진 내용을 try catch문을 이용해 에러를 탐지한다.