TIL32. async / await

async / await

async await는 비동기 프로그래밍을 동기 프로그래밍처럼 작성할 수 있도록 함수에 추가된 기능이다. ES2017에서 자바스크립트 표준이 되었으며, async await를 이용해서 코드를 작성하면 가독성이 좋아진다.
async await는 비동기 상태를 값으로 다룰 수 없기 때문에 프로미스를 완전히 대체하는 것은 아니다!


Async/await 는 프로미스를 더 간편하게 사용하도록 해준다.

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

await 의 대상이 되는 비동기 처리 코드는 보통 프로미스를 반환하는 API 호출 함수이다.

Async

async 키워드는 함수 앞에 위치

async function f() {
  return 1;
}

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


Await

await는 async함수 안에서만 작동한다. await는 프로미스의 상태가 정해지고 결괏값을 반환할 때까지 자바스크립트의 동작을 멈추게 한다.


에러 핸들링

일반적으로 try..catch 구문을 이용

async function f() {

  try {
    let response = await fetch('/no-user-here');
    let user = await response.json();
  } catch(err) {
    // catches errors both in fetch and response.json
    alert(err);
  }
}

f();

에러 발생시 catch 블록으로 이동한다.

좋은 웹페이지 즐겨찾기