async await (+ promise)

5ERN·2022년 12월 27일
0

JavaScript

목록 보기
1/4

들어가기 전, 프라미스(promise 객체)에 대해 잠깐 알고 가자!

-'Promise'는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환한다.

async()

async function f() {
  return 1;
}

function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다.
프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다.

await()

await는 꼭! async가 우선되어야 한다!

let value = await promise;

JS는 await 키워드를 만나면 프라미스가 처리될 때까지 기다린다.
await는 프라미스가 처리될 때까지 함수 실행을 기다리게 만든다.

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();

프라미스가 처리되면 그 결과와 함께 실행이 다시 시작된다.
프라미스가 처리되길 기다리는 동안엔 엔진이 다른 일(다른 스크립트 실행, 이벤트 처리, ...)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않는다.

profile
응애개발자

0개의 댓글