최신 자바스크립트 | async await

 

 

async await는 비동기 프로그래밍을 동기 프로그래밍처럼 작성할 수 있도록 함수에 추가된 기능입니다. 프로미스가 자바스크립트 표준이 된 이후에 등장한 새로운 표준인데, 프로미스를 대체하는 개념이라기 보다는 보완하는 개념입니다. async await 함수가 프로미스를 반환하기 때문입니다. 

 

async 함수 선언의 기본 형태는 다음과 같습니다. 

// async 함수는 프로미스를 반환합니다
async function getData(){
  return "Javascript make me angry";
}
 
// 따라서 then 메소드 호출이 가능합니다
getData().then(data => console.log(data))

 

 

async 함수에는 await 식이 포함될 수 있습니다. 이 식은 async 함수의 실행을 일시 중지하고 전달된 프로미스의 처리를 기다린 다음 async 함수의 실행을 다시 시작하고 완료 후 값을 반환합니다. await 키워드는 async 함수에서만 유효합니다.

function requestData(value){
  return new Promise(resolve => 
    setTimeout(() => {
      console.log("requestData : ", value);
      resolve(value);
    }, 500)
  )
}
 
async function getData(){
  const data1 = await requestData(10);
  const data2 = await requestData(20);
  return [data1, data2];
}
 
getData();

requestData :  10
requestData :  20

await의 오른편에 위치한 함수는 결국 프로미스(반환될)입니다. 프로미스가 처리됨 상태(이행 또는 거부) 상태가 될 때까지 기다렸다가 비동기 동작이 처리되면 순차적으로 코드를 실행합니다.