Promise 순차실행하기

준비물로 promise가 담긴 배열을 만들어봅시다.
간단한 wait 함수를 만들도록 하겠습니다.

const wait = (time) =>
new Promise((resolve) => {
    setTimeout(() => {
        resolve();
    }, time);
});

wait 함수를 이용하여 비동기 함수를 만들고 익숙한 Promise.then 함수를 이용하여 순차적으로 실행할 수 있습니다.

const func1 = async () => {
    await wait(1000);
    console.log("1 done");
};

const func2 = async () => {
    await wait(1000);
    console.log("2 done");
};

func1().then(func2)

결과

1 done
2 done

순차적으로 실행 할 함수가 많아질 수록 then 메소드를 사용하는게 귀찮아지고, 보기 힘들어집니다.
reduce함수를 이용하여 해당작업은 간편하게 할 수 있습니다.

[func1, func2].reduce((p, f) => p.then(f), Promise.resolve());

출처 :

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Using_promises#composition

developer.mozilla.org

async/ await 를 이용하여 더 간단하게 만들 수 있습니다.

const run = async () => {
    await func1();
    await func2();
};
run();

동일하게 for of 문 혹은 reduce를 이용하여 긴 배열의 비동기 함수들도 실행할 수 있습니다.

for of 사용

const run = async () => {
    for (const func of promises) {
        await func();
    }
};
run();

recude 사용

promises.reduce(async (prev, current) => {
    await prev;
    return current();
}, Promise.resolve());

buy me a coffee