[JavaScript] 자바스크립트에서 Promise 직렬 처리하기

219_자바스크립트에서 Promise 직렬 처리하기

[적용]

• 외부 데이터를 가져와 후속 처리 작업에 사용하고 싶을 때

---

[내용]

처리가 끝난 데이터를 다음 작업에 이어서 사용하는 방법을 알아보자.

외부 데이터를 가져와 다음 처리에 연결할 때 유용하다.

Promise를 사용하는 방법과 await나 async를 사용해 처리하는 방법을 알아보자.

직렬 처리는 await와 async를 사용하는 것이 더 간단하다.

 

Promise를 사용하는 방법

JavaScript                                                                                                                                                          main.js

Promise.resolve()
  .then(
    () =>
      new Promise((resolve) => {
        setTImeout(() => {
          console.log('첫 번째 Promise', new Date().toLocaleTimeString());
          resolve();
        }, 1000);
      })
  )
  .then(
    () =>
      new Promise((resolve) => {
        setTimeout(() => {
          console.log('두 번째 Promise', new Date().toLocaleTimeString());
          resolve();
        }, 1000);
      })
  );

 

Await와 async를 사용하는 방법

JavaScript                                                                                                                                                          main.js

start();

async function start() {
  await new Promise((resolve) => {
    setTimeout(() => {
      console.log('첫 번째 Promise', new Date().toLocaleTimeString());
      resolve();
    }, 1000);
  });
  
  await new Promise((resolve) => {
    setTimeout(() => {
      console.log('두 번째 Promise', new Date().toLocaleTimeString());
      resolve();
    }, 1000);
  });
}

 

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김