[Javascript/자바스크립트] Day5 - async와 await

async와 await의 문법을 사용하면 프라미스를 좀 더 편하고, 가독성있게 코드를 관리할 수 있다.

 

1.  async 함수

async function f() {
   return 1;
}

async function f() {
   retrurn 1;
}

f().then(alert);	// 1

async function() {
   return Promise.resolve(1);
}

f().then(alert);	// 1

 

 

2. await

   : 일반 함수엔 await를 사용할 수 없다

let value = await promise;

async function f() {
   let promise = new Promise((resolve, reject) => {
      setTimeout(() => resolve('완료'), 1000)
   });
   
   let result = await promise;	// 프라미스가 이행될 때까지 기다림
   
   alert(result);	// '완료'
}

f();

 

3. 정리

• async/await와 promise.then/catch

async와 await를 사용하면 await가 대기를 처리해주기 때문에 .then이 거의 필요하지 않다. 여기에 .catch 대신 일반 try..catch를 사용할 수 있다는 장점도 생긴다. 따라서 보통 async/await를 사용하는 것이 더 편하다

그치만 문법적인 제약 때문에 async함수 바깥의 최상위 레벨 코드에선 await를 사용할 수 없어서 그때엔 .then/catch를 사용해 최종 결과나 에러를 다룬다.

• function 앞에 async 키워드를 추가하면, 그 함수는 언제나 프라미스를 반환하고, 함수안에서 await를 사용할 수 있다
• 프라미스 앞에 await 키워드를 붙이면 자바스크립트는 프라미스가 처리될 때까지 대기한다

 

async/await 를 알기 위해선 그 전에 promise를 알아두면 편해요!

2023.01.26 - [Language/JavaScript] - [Javascript/자바스크립트] Day5 - 프라미스(Promise)와 체이닝(chaining), 프라미스 API

[Javascript/자바스크립트] Day5 - 프라미스(Promise)와 체이닝(chaining), 프라미스 API