async/await

async function

async function 객체를 반환하는 하나의 비동기 함수를 정의한다.

비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환한다.

• 예시

  • // async는 function 앞에 위치한다.
    
     // 함수 선언식
    async function funcDeclarations() {
    	await 작성하고자 하는 코드
    	...
    }
    
     // 함수 표현식
    const funcExpression = async function () {
    	await 작성하고자 하는 코드
    	...
    }
    
     // 화살표 함수
    const ArrowFunc = async () => {
    	await 작성하고자 하는 코드
    	...
    }

• 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다.

  • async function f() {
      return 1;
    }
    
     f().then(alert); // 1
     
     //---------------------//
     // 아래와 결과는 동일하다.//
     //---------------------//
     
     async function f() {
      return Promise.resolve(1);
    }
    
     f().then(alert); // 1

• asyn가 붙은 함수는 반드시 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환한다.

await

• async 함수에는 await식이 포함될 수 있다.

  • 이 식은 async 함수의 실행을 일시 중지하고 전달 된 Promise의 해결을 기다린 다음 async 함수의 실행을 다시 시작하고 완료 후 값을 반환한다.

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

• 함수를 호출하고, 함수 본문이 실행되는 도중에 await을 만나 실행이 잠시 중단 되었다가 프라미스가 처리되면 실행이 재개된다.
  • 이때 프라미스 객체의 result 값이 변수 result에 할당된다.
  • 따라서 위 예시를 실행하면 1초 뒤에 '완료!'가 출력된다.