JavaScript ES6에서 Promise Looping을 올바르게 처리하는 방법은 무엇입니까?

JavaScript ES6 Promise Looping

JavaScript ES6에서 Promise는 비동기 프로그래밍을 위한 메커니즘을 제공합니다. 그러나 루프 내에서 Promise를 사용하면 루프의 동기 특성으로 인해 예상치 못한 동작이 발생할 수 있으므로 문제가 발생합니다.

비동기 Promise Chaining

각 Promise가 실행되도록 하려면 이전 작업이 해결된 후에만 비동기 Promise Chaining을 구현해야 합니다. 여기에는 이전 약속이 해결된 경우에만 각 약속을 생성하는 작업이 포함됩니다.

setTimeout()을 사용한 약속 생성

비동기 작업을 시뮬레이션하기 위해 종종 setTimeout()을 사용합니다. 그러나 체인이 효과적으로 작동하려면 Promise 기반 버전의 setTimeout()이 필요합니다. 다음은 setTimeout()을 약속하는 함수입니다.

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

솔루션 옵션

약속된 setTimeout()을 사용하면 여러 옵션을 사용하여 비동기 약속 연결 내에서 사용할 수 있습니다. for 루프:

1. 초기 약속이 있는 for 루프:

이 방법은 즉시 해결되는 약속으로 시작하는 for 루프를 사용합니다. 각 반복은 이전 약속의 결과를 기반으로 새로운 약속을 연결합니다.

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를 사용하여 다양한 값을 반복하고 각 단계의 결과에 따라 약속을 만듭니다.

const delayAndLog = (acc, i) => acc.then(() => delay(Math.random() * 1000))
         .then(() => console.log(i));

[...Array(10).keys()].reduce(delayAndLog, Promise.resolve());

3. 약속 해결을 통한 재귀 함수:

이 메서드에는 then 콜백 내에서 자신을 호출하는 함수가 포함됩니다. 각 호출은 다음 반복이 준비되면 결과 Promise를 해결합니다.

let i = 0;
const loop = () => delay(Math.random() * 1000)
        .then(() => console.log(i++))
        .then(loop);

loop().then(() => {});

4. async/await(ES2017):

ES2017에서는 보다 간결한 비동기 코드를 허용하는 async/await를 도입했습니다.

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

loop();

5. for wait...of(ES2020):

비동기 반복을 단순화하는 wait...of 구문을 위해 ES2020이 도입되었습니다.

async function* loop() {
    for (let i of [...Array(10).keys()]) {
        yield await delay(Math.random() * 1000);
    }
}

for await (const i of loop()) {
    console.log(i);
}

이러한 솔루션은 각 약속이 원하는 대로 이전 루프가 해결된 후에만 루프가 실행됩니다.

위 내용은 JavaScript ES6에서 Promise Looping을 올바르게 처리하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!