async/await

양선희·2021년 3월 3일
0

es6

목록 보기
2/2
post-thumbnail

✅ async/await

  • promise chaning을 계속하다보면 코드 가독성이 떨어짐
  • async & await는 promise를 간결/간편하고 동기적으로 실행되는것 처럼 보이게 만들어줌
  • async와 await는 새로운 것이 추가된것이 아니라 기존에 존재하는 promise위에 조금더 간편한 API 제공함

async

async 키워드는 함수 앞에 위치한다.

async function 함수명() {
  await 비동기_처리_메서드_명();
}

함수 앞에 Async키워드를 두는 것은, '이 함수는 프로미스를 반환하겠다'는 의미이다. 결괏값은 자동으로 resolve()로 감싸진다.

await

  • await 키워드는 async await 함수 내부에서 사용된다. await 키워드 오른쪽에 프로미스를 입력하면, 그 프로미스가 처리될 때까지 기다린다.
  • 일반적으로 await의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반환하는 API 호출 함수다.
// async & await 적용 후 

async function 함수명() {
  const response = await getData();
  console.log(response);
}

async & await 예외 처리

Promise에서는 then과 catch를 사용했다.
async/await에서는 try catch를 사용하면 된다.

async function logTodoTitle() {

  try {
        const response = await getData();
        console.log('## async await SUCCEED :', response);
    } catch(e) {
        console.error('## async await FAILED :', e);
    }
}
run();

0개의 댓글