JavaScript ES6 For 루프에서 약속을 직렬화하는 방법은 무엇입니까?

JavaScript ES6 Promise For Loop Serialization

주어진 코드에서 for 루프 내에서 Promise를 순차적으로 실행하려고 시도했지만 문제가 발생했습니다. 루프가 동기적으로 실행되어 예측할 수 없는 결과가 발생합니다. 출력.

문제 이해:

Promise는 비동기 작업을 캡슐화하지만 루프의 동기 특성은 원하는 순서를 무시하고 모든 Promise를 동시에 트리거합니다.

약속하다 setTimeout:

순차 실행을 용이하게 하기 위해 타이머가 만료될 때 해결되는 약속을 얻도록 setTimeout을 약속할 수 있습니다.

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

해결책 옵션:

Promise와 비동기 프로그래밍을 활용하여 이 문제를 해결하는 방법은 여러 가지가 있습니다. 기술.

1. 초기 Promise가 있는 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를 사용하면 for 루프 접근 방식과 유사한 Promise 체인을 만들 수 있습니다.

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

3. 약속 해결 콜백으로서의 함수:

자신을 해결 콜백으로 전달하는 함수를 정의하여 재귀적 약속 체인을 허용할 수 있습니다:

const loop = (i) => {
  delay(Math.random() * 1000)
    .then(() => console.log(i))
    .then(() => {
      if (i < 10) loop(i + 1);
    });
};
loop(0);

4. async/await 구문(ES2017):

ES2017에서는 비동기 코드 처리를 단순화하기 위해 async/await 구문을 도입했습니다.

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

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

ES2020은 비동기 반복 가능 항목을 반복하기 위한 특수 구문을 도입했습니다.

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

이러한 기술을 활용하면 Promise를 순차적으로 실행할 수 있습니다. 루프 내에서 원하는 작업 순서를 보장하고 예측할 수 없는 출력을 방지합니다.

위 내용은 JavaScript ES6 For 루프에서 약속을 직렬화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!