본문 바로가기
Computer Science/JavaScript

자바스크립트 Chapter 26 async / await

by Write and Remember 2019. 5. 19.

 

모든 자바스크립트 개발자가 알아야 하는 33가지 개념

 

Chapter 26 async / await

 

이번 장에서는 async / await 알아보자.

 

async / await을 이용하면 프로미스를 좀 더 편하게 다룰 수 있다.

 

즉 항상 프로미스(promises)를 반환한다는 것이다.

 

// 함수 정의 앞에 async 키워드를 사용하면 함수 내에 await를 사용할 수 있다.
async function myAsyncFunction() {
  try {
    const fulfilledValue = await promise
  }
  catch (rejectedValue) {
  }
}

 

async function e() {
  return 2;
}

e().then(console.log); // 2

 

명시적으로 프로미스를 반환할 수 있다.

 

async function e() {
  return Promise.resolve(2);
}

e().then(console.log); // 2

 

await 키워드는 프로미스가 해결되어

 

그 결과를 돌려줄 때까지 기다린다.

 

let value = await promise;

 

async function e() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("success"), 500)
  })

  let result = await promise; // 프로미스가 해결 할 때까지(promise resolve) wait 
    
  console.log(result) // success
}

e()

 

e 비동기 함수 실행은

 

6번 라인에서 일시 중지되고 프로미스가 해결되면

 

다시 시작하여 결과가 출력된다.

 

주목할점은 프로미스가 해결될때 까지

 

기다리고, 그 결과로 계속 진행한다는 것이다.

 

그동안 엔진은 다른 작업을 수행할 수 있으므로

 

CPU 자원을 낭비하지 않는다.

 

다른 스크립트를 실행하고 이벤트를 처리한다.

 

Chapter 25 promises에서 다룬 .then()보다 더 쓰고 읽기 쉽다.

 

2019/05/18 - [Computer Science/JavaScript] - 자바스크립트 Chapter 25 Promises

 

자바스크립트 Chapter 25 Promises

모든 자바스크립트 개발자가 알아야 하는 33가지 개념 Chapter 25 Promises 이번 장에서는 프로미스에 대해 알아보자. Promises 프로미스는 비동기 조작의 최종 완료나 실패를 표현해주는 객체이다. 콜백 함수(Ca..

jeongw00.tistory.com

 

async / await 사용하는 목적은 여러 promise의 동작을

 

동기스럽게 사용할 수 있게 한다는 것이다.

댓글0