JavaScript - async, await

async, await?

 

 

async, await은 자바스크립트 비동기 처리를 위한 키워드.

 

기존의 비동기 처리 방식인 콜백 함수, Promise의 단점인 좋지 않은 가독성을 보완한 가장 최근에 나온 자바스크립트 비동기 처리방식

 

async, await으로 개발자는 비동기 처리를 가독성 좋은 코드로 해결할 수 있습니다.

 

async

 

 

async는 함수 앞에 위치합니다

 

async function f() {
    return 1;
}

 

 

함수 앞에 async를 붙이면 해당 함수는 promise를 반환합니다. promise가 아닌 값을 반환하더라도 resolved promise 형태로 promise가 반환되도록 합니다.

 

 

await

 

 

await 문법은 async 함수 안에서 동작하며 await은 promise가 처리될 때까지 기다립니다.

 

async function f() {
    let promise = new Promise((resolve,reject) => {
        setTimeout(() => resolve('clear'), 1000)
    });

    let result = await promise;

    alert(result);
}

f();

 

 

자바스크립트가 6번 줄을 만나면 promise함수가 promise를 반환할 때까지 기다립니다. 3번 줄의 setTimeout함수가 실행되어 1초 뒤에 'clear'를 출력하는 alert이 생성됩니다. 

 

함수 실행은 await 키워드를 만나면 "일시정지"되고 promise가 실행된 후 "재생"됩니다. 이렇게 await 키워드로 함수 실행이 "일시정지"된 경우 자바스크립트 엔진은 다른 코드나 이벤트 핸들링을 할 수 있습니다 (비동기 키워드이기 때문)

 

async, await은 그저 "promise.then"보다 가독성 좋게 promise 결과를 받을 수 있는 방법입니다.

 

 

에러 처리

 

 

promise가 정상적으로 이행되면 await promise는 프라미스 객체의 result에 저장된 값을 반환합니다.

 

반면 비동기 처리가 실패하거나 오류가 발생하면 reject가 반환되고 throw문을 작성한 것처럼 에러가 던져집니다.

 

await이 throw 한 에러는 try, catch문으로 잡을 수 있습니다.

 

 

async function f() {

  try {
    let response = await fetch('http://유효하지-않은-주소');
  } catch(err) {
    alert(err); // TypeError: failed to fetch
  }
}

f();

 

요약

 

 

함수 앞에 async 키워드를 추가하면 두 가지 효과가 있습니다.

 

1. 함수는 언제나 promise를 반환합니다
2. 함수 안에서 await을 사용 가능합니다

 

promise앞에 await이 붙이면 자바스크립트는 promise가 처리될 때까지 기다립니다. 처리가 완료되면 결과에 따라 다음 두 가지 작업이 실행됩니다.

 

1. 에러 발생 (reject) : 에러가 생성됨. catch문으로 받기 가능
2. 정상 처리 (resolve) : 프라미스 객체를 반환

 

 

출처

https://ko.javascript.info/async-await