JavaScript에서 약속을 사용하여 비동기식 연결을 달성하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript에서 약속을 사용하여 비동기식 연결을 달성하는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-12-04 20:11:16

원래의

806명이 탐색했습니다.

How to Achieve Asynchronous Chaining with Promises in JavaScript?

JavaScript ES6에서 Promise를 사용한 비동기 연결

제공된 JavaScript 코드 조각은 루프 내에서 Promise를 생성하려고 시도하지만 동기식 체인으로 인해 실패합니다. 루프의 성격. 이 문제를 해결하려면 각 Promise를 순차적으로 생성하고 해결하여 비동기식으로 만들어야 합니다.

이 연결을 달성하는 데는 여러 가지 접근 방식이 있습니다.

For 루프를 사용하여 초기 약속:

즉시 해결되는 약속을 초기화한 다음 이전 약속과 마찬가지로 이 초기 약속에 새로운 약속을 연결합니다.

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

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

로그인 후 복사

초기 약속과 함께 Array.reduce 사용:

for 루프 접근 방식과 유사하게 Array.reduce를 사용하여 약속을 연결하고 초기 약속.

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

로그인 후 복사

재귀적 사용 연결 함수:

현재 인덱스를 인수로 전달하여 자신을 해결 콜백(예: 약속 체인)으로 호출하는 함수를 정의합니다.

const chainPromises = (i = 0) => {
    if (i >= 10) return;

    delay(Math.random() * 1000).then(() => {
        console.log(i);
        chainPromises(i + 1);
    });
};

chainPromises();

로그인 후 복사

사용 Async/Await(ES2017):

실행을 일시 중지하려면 async/await를 사용하세요. Promise가 해결될 때까지 함수를 사용합니다.

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

asyncPromises();

로그인 후 복사

For Await...Of(ES2020) 사용:

async/await와 유사하며 for wait를 사용합니다. ...비동기 반복 가능 항목을 반복하는 구문입니다.

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

asyncPromises();

로그인 후 복사

위 내용은 JavaScript에서 약속을 사용하여 비동기식 연결을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!