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

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

[적용]

• 비동기 처리를 순서대로 시작 후 모든 처리가 완료될 때까지 대기하고 싶을 때

---

[내용]

코드를 작성하면서 Promise 의 실행 여부를 미리 알 수 있으면 아래 링크와 같은 방식으로 코드를 사용할 수 있다.

https://stonefree.tistory.com/310

[JavaScript] 자바스크립트 이벤트 작동 설정하기

하지만 동적으로 Promise의 수가 변하는 경우 해당 방식으로는 사용할 수 없다.

이 경우는 비동기 처리 실행의 함수를 배열에 보관하고, 루프문을 사용해 Promise와 await로 처리를 연결한다.

Promise는 인스턴스화한 순간 함수가 실행되므로, 실행 직전까지 인스턴스화하지 않는 것이 핵심이다.

루프문에서 await는 Promise의 완료를 기다리므로 배열에 보관된 비동기 처리를 순서대로 실행한다.

 

JavaScript                                                                                                                                                          main.js

// 배열 생성
const listFunctions = [];

// 동적으로 함수 추가
for (let i = 0; i < 5; i++) {
  // 1초 후 처리하는 비동기 함수 생성
  const func = (resolve) => {
    // setTimeout으로 지연 작업 처리
    setTimeout(() => {
      sonsole.log(`함수 ${i}가 완료되었습니다.`, new Data().toLocaleTimeString());
      resolve();  // Promise 완료
    }, 1000);
  };
  // 배열에 보관
  listFunctions.push(func);
}
// 배열 내용 출력
console.log(listFunctions);  // 결과: ([Function: func], ...

execute();

async fuction execute() {
  // 비동기 처리 순서대로 진행
  for (let i = 0; i < listFunctions.length; i++) {
    const func = listFunctions[i];
    await new Promise(func);
  }
}

 

 

 

---

 

 

 

 

 

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