[JavaScript][기초] Promise, async 비동기 처리

자바스크립트는 싱글 스레드로 작동하기 때문에 Stack에서 코드를 순차적으로 실행시키고 Web APIs에 비동기 작업을 위임한다.

Web APIs에서 완료 된 비동기 작업들은 Callback queue에 할당되고 Event loop를 통해 Stack에 등록되면 callback 함수가 호출된다.

 

 

 

1. Promise

add10 함수 호출 2초후에 executor가 실행 된다.

function add10(num) {
  // Promise는 비동기 작업을 감싸는 객체
  const promise = new Promise((resolve, reject) => {
    // executor
    // 비동기 작업을 실행하는 함수
    setTimeout(() => {
      if (typeof num === "number") {
        console.log("executor");
        resolve(num + 10); // 성공 후 num + 10 값을 then으로 보냄
      } else {
        reject("Not Number type"); // 실패 catch로 error message를 보냄
      }
    }, 2000);
  });

  return promise;
}

add10(1)
  .then((result) => {
    console.log("first then", result);
    return add10(result);
  })
  .then((result) => {
    console.log("second then", result);
    return add10(result);
  })
  .then((result) => {
    console.log("third then", result);
    return add10(result);
  })
  .then((result) => {
    console.log("final then", result);
  })
  .catch((error) => {
    console.log(error);
  });


// 출력
// executor
// first then 11
// executor
// second then 21
// executor
// third then 31
// executor
// final then 41

 

2. async, await

printData()함수는 Promise객체를 리턴하고 getData()함수가 끝날 때 까지 기다린다.

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        name: "DY",
        id: "async",
      });
    }, 1500);
  });
}

// async
// 어떤 함수가 Promise를 반환하도록 변환해주는 키워드

// await
// async 함수 내에서만 사용이 가능한 키워드
// 비동기 함수가 다 처리될 때 까지 기다리는 역할

async function printData() {
  console.log("start");
  const data = await getData();
  console.log(data); // {name: 'DY', id: 'async'}
  console.log("end");
}

console.log(printData()); // Promise {<pending>}