JavaScript, 비동기함수 와 await(async/await)

비동기 함수 async function

앞서 살펴본 Promise 객체를 사용한 비동기 프로그래밍을 보완해서 ES7 에 비동기 함수가 추가되었다. 

비동기 함수의 결과 값은 항상 Promise 객체로 resolve 되며, 비동기함수 안에서만 await 연산자를 사용할 수 있다. 

function 함수명(){
	return Promise.resolve("값")
}

// 위 함수와 아래 함수는 결과적으로 같은 동작을 한다.

async function 함수명(){
	return "값"
}

 

- Promise 와의 차이점은 new Promise(executor) 로 Promise를 생성하면 executor 가 바로 실행되는 것과 달리 비동기 함수는 함수가 실행되기 전까지 Promise 를 생성하지 않는다. 

 

await 연산자

await 연산자는 비동기 함수 내에서만 사용할 수 있는 연산자고 이를 사용하면 Promise 가 fulfilled , rejected 상태가 될 때까지 함수의 실행을 중단하고 기다릴 수 있다. 

const result = await "값"

- await 연산자는 실행을 할 구문에 await 을 붙여 사용한다. 

 

async function 함수명(){
	const result = await "Test";
    console.log(result);
}

함수명()

// >> Test

- 위 코드처럼 await 연산자를 붙인 값에는 Promise 가 아닌 다른 값도 들어갈 수 있다. 값이 Promise 가 아니라면 기다리지 않고 해당 값 자체를 그대로 반환한다. 

 

async / await 예제

function setTimeoutFunc(time) {
  return new Promise((resolve, rejects) => {
    setTimeout(() => {
      console.log(time, "의 시간이 지났습니다.");
      resolve();
    }, time);
  });
}

async function main() {
  console.log("시작");
  await setTimeoutFunc(1000);
  console.log("종료");
}

main();

→ 시작
// 1초 뒤 동시 출력
    1000의 시간이 지났습니다. 
    종료

- await 으로 인해 setTimeoutFunc(1000) 함수를 호출하기 전까지 첫번째 단락의 함수가 대기하고 있는 상태가 되기 때문에 setTimeoutFunc(1000)의 결과값으로 resolve 나 reject가 실행되기 전까지 대기한다.