JavaScript ES6 For 루프에서 Promise를 순차적으로 실행하려면 어떻게 해야 합니까?

JavaScript ES6 Promise for Loop

프로그래밍에서 일반적인 작업은 컬렉션을 반복하고 각 요소에 대해 비동기 작업을 수행하는 것입니다. JavaScript ES6에서 Promise는 이를 달성하기 위한 강력한 수단을 제공합니다. 그러나 각 Promise가 이전 Promise 이후에만 실행되도록 하는 것은 어려울 수 있습니다.

제공된 코드 스니펫에서 for 루프는 모든 Promise를 동기식으로 생성하여 무작위 출력을 발생시킵니다. 우리의 목표는 각 Promise를 순차적으로 실행하는 것입니다(.then()).

setTimeout 약속

코드를 개선하기 위해 setTimeout의 약속된 버전을 만들어 보겠습니다.

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

이 함수는 타이머가 만료되면 해결되는 Promise를 반환하므로 쉽게 연결할 수 있습니다. promise.

약속 연결

약속된 setTimeout을 사용하면 원하는 연결을 구현하는 여러 가지 방법이 있습니다.

1. for

for 루프를 사용하여 즉시 해결되는 초기 Promise를 만들고 이전 Promise가 해결되는 대로 새로운 Promise를 연결합니다.

for (let i = 0, p = Promise.resolve(); i < 10; i++) {
    p = p.then(() => delay(Math.random() * 1000))
         .then(() => console.log(i));
}

2. Array.reduce

또 다른 옵션은 Array.reduce를 사용하는 것입니다:

[...Array(10)].reduce((p, _, i) => p.then(() => delay(Math.random() * 1000))
                               .then(() => console.log(i)), Promise.resolve());

3. 재귀 함수 사용

재귀 함수도 사용할 수 있습니다:

const loopPromise = (i, p) => {
    if (i >= 10) {
        return;
    }
    p.then(() => delay(Math.random() * 1000))
     .then(() => console.log(i))
     .then(() => loopPromise(i + 1, p));
};

loopPromise(0, Promise.resolve());

4. 비동기/대기

이 구문은 ECMAScript 2017에서 사용할 수 있습니다:

async function asyncLoop() {
    for (let i = 0; i < 10; i++) {
        await delay(Math.random() * 1000);
        console.log(i);
    }
}

asyncLoop();

5. for wait...of

ECMAScript 2020에 도입된 이 구문은 루프를 더욱 단순화합니다.

for await (let i of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) {
    await delay(Math.random() * 1000);
    console.log(i);
}

이러한 방법을 활용하면 for 루프에서 Promise를 효과적으로 연결할 수 있습니다. 각 Promise는 이전 Promise가 해결된 후에만 실행됩니다.

위 내용은 JavaScript ES6 For 루프에서 Promise를 순차적으로 실행하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!