[ JavaScript ] async await 문법

 

 

 

ES8에서 간단하고 가독성 좋게 비동기 처리를 동기처럼 동작하도록 구현할 수 있는 async/await가 등장했다.

async/await는 프로미스를 기반으로 동작하며, async/await를 사용하면 프로미스의 후속 처리 메서드 없이 마치 동기 처리처럼 프로미스가 처리 결과를 반환하도록 구현할 수 있다.

 

 

async 함수는 async 키워드를 통해 정의하고, 프로미스를 사용하여 결과를 반환한다.

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"
}

asyncCall();

await 키워드는 프로미스가 settled 상태(비동기 처리가 수행된 상태)가 될 때까지 대기하다가 settled 상태가 되면 프로미스의 resolve r결과를 반환한다. await 키워드는 async 함수에서만 유효하고, async 함수 외부에서 사용하면 SyntaxError가 발생한다.

 

 

await문이 있다면 asynct 함수는 비동기적으로 완료되기 때문에 모든 프로미스에 await 키워드를 사용하는 것은 주의하여야 한다.

async function getFruit(){
	const apple = await new Promise(resolve => setTimeout(() => resolve('apple'), 2000));
	const banana = await new Promise(resolve => setTimeout(() => resolve('banana'), 3000));
	const melon = await new Promise(resolve => setTimeout(() => resolve('melon'), 1000));

	console.log([apple, banana, melon]); // ['apple','banana','melon']
}

getFruit(); // 약 6초가 소요된다.

 위의 예제와 같이 getFruit 함수는 종료될 때까지 약 6초가 소요된다. 그래서 위와 같이 getFruit 함수 내부의 3개의 비동기 처리는 서로 연관성이 없기 때문에 apple -> banana -> melon 식의 순서로 처리할 필요가 없다.

async function getFruit() {
	const fruits = await Promise.all([
    	new Promise(resolve => setTimeout(() => resolve('apple'), 2000)),
        new Promise(resolve => setTimeout(() => resolve('banana'), 3000)),
        new Promise(resolve => setTimeout(() => resolve('melon'), 1000)),
    ]);
    
    console.log(fruits); // ['apple', 'banana', 'melon']
}

getFruit(); // 약 3초 소요

위처럼 Promise.all 메서드를 사용하여 프로미스의 결과를 받는다.

 

 

 

async/await 의 에러 처리는 try... catch문을 사용할 수 있다.  async 함수 내에서 catch 문을 사용하여 에러를 처리하지 않는다면 async 함수는 발생한 에러를 reject 하는 프로미스를 반환한다. 

 

 

 

---

 

🌸 출처 🌸

 

async await- MDN

제너레이터와 async/await - 모던 자바스크립트 딥 다이브

자바스크립트 13. 비동기의 꽃 async와 await - 드림코딩

Promise.all() - MDN