자바스크립트 - async await 비동기 처리하기

비동기 asynchronous 란?

특정 작업이 완료할 때까지 대기하지 않고,

다른 작업을 먼저 진행하고

특정 작업이 완료가 되면 이벤트에 응답할 수 있는 방법입니다.

fetch('https://dummyjson.com/users')
.then(res => res.json())
.then(console.log);

// to do something

 

fetch 작업을 진행하고,

아래에는 다른 작업들이 진행되게 됩니다.

그리고 then 을 이용하여 api 호출이 완료가 되면 완료 이후 로직이 타게 됩니다.

async / await

여러 비동기 함수를 콜백함수를 이용해서 처리하면, 콜백 지옥에 빠질 수 도 있습니다.

그렇게 되면 코드가 복잡하게 되어서 로직을 이해하기 어려울 수 있습니다.

 

async / await 문법을 사용하게 되면 동기처럼 코드를 작성할 수 있고,

코드를 직관적으로 비동기 처리할 수 있는 장점이 있습니다.

 

async / await 사용법

async function getUser() {
  const res = await fetch('https://dummyjson.com/users')
  const data = await res.json();
  
  console.log(data);
  return data;
}

getUser();

 

function 함수 앞에 async를 붙이면 promise 함수가 반환됩니다.

 

그리고 비동기 함수 앞에

await을 붙이면 비동기 함수가 실행하고

완료될 때까지 기다린 이후에 다음 코드가 실행됩니다.

 

오류 처리

Promise나 일반적인 다른 비동기 처리에서는 reject 등을 이용해서 오류 처리를 하였습니다.

하지만 async / await 은 try...catch 문을 이용하여 오류 처리를 합니다.

async function getUser() {
  try {
      const res = await fetch('https://dumm12yjson.com/users')
      const data = await res.json();
  
      console.log(data);
      return data;
  } catch(error) {
    console.log('error', error);
  }
}

getUser();

 

함수에서 오류가 발생하게 되면 catch문이 실행되고 오류에 대한 예외 처리를 할 수 있습니다.