> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 Promise 간에 데이터 순서를 효율적으로 지정하고 공유하는 방법은 무엇입니까?

JavaScript에서 Promise 간에 데이터 순서를 효율적으로 지정하고 공유하는 방법은 무엇입니까?

DDD
풀어 주다: 2024-12-01 02:52:11
원래의
622명이 탐색했습니다.

How to Efficiently Sequence and Share Data Between Promises in JavaScript?

프라미스 체인에서 데이터 순서를 지정하고 공유하는 방법

프라미스는 JavaScript에서 비동기 작업을 관리하기 위한 강력한 도구를 제공합니다. 그 일환으로 작업 순서를 지정하고 작업 간에 데이터를 공유해야 합니다. 특정 문제를 해결해 보겠습니다.

Promise를 통한 HTTP 요청 연결 및 데이터 공유

이 시나리오에서는 Promise를 사용하여 일련의 HTTP 요청을 수행합니다. 한 요청의 응답은 다음 요청의 입력으로 사용되어야 합니다. callhttp 함수는 이러한 요청을 처리하지만 다음 요청을 구성하려면 이전 요청의 데이터에 액세스해야 합니다. 특히 첫 번째 요청에서 얻은 API 키를 후속 요청에 전달하려고 합니다.

데이터 공유 및 시퀀싱을 위한 접근 방식

이를 달성하기 위한 몇 가지 접근 방식이 있습니다.

1. 연결된 약속:

then을 사용하여 약속을 연결하고 중간 데이터를 인수로 전달합니다.

callhttp(url1, payload)
    .then(firstResponse => {
        // Use the data from firstResponse in the next request
        return callhttp(url2, payload, firstResponse.apiKey);
    })
    .then(secondResponse => {
        // Use the combined data from firstResponse and secondResponse in the next request
        return callhttp(url3, payload, firstResponse.apiKey, secondResponse.userId);
    });
로그인 후 복사

2. 더 높은 범위 할당:

중간 결과를 더 높은 범위의 변수에 할당:

var firstResponse;
callhttp(url1, payload)
    .then(result => {
        firstResponse = result;
        return callhttp(url2, payload);
    })
    .then(secondResponse => {
        // Use both firstResponse and secondResponse here
    });
로그인 후 복사

3. 결과 누적:

결과를 누적 개체에 저장:

var results = {};
callhttp(url1, payload)
    .then(result => {
        results.first = result;
        return callhttp(url2, payload);
    })
    .then(result => {
        results.second = result;
        return callhttp(url3, payload);
    })
    .then(() => {
        // Use the accumulated results in results object
    });
로그인 후 복사

4. 중첩된 약속:

Nest는 이전의 모든 결과에 대한 액세스를 유지할 것을 약속합니다.

callhttp(url1, payload)
    .then(firstResponse => {
        // Use firstResponse here
        return callhttp(url2, payload)
            .then(secondResponse => {
                // Use both firstResponse and secondResponse here
                return callhttp(url3, payload);
                    .then(thirdResponse => {
                        // Use all three responses here
                    });
            });
    });
로그인 후 복사

5. Promise.all()로 분할:

일부 요청을 독립적으로 만들 수 있는 경우 체인을 별도의 조각으로 나누고 Promise.all()을 사용하여 결과를 수집합니다.

const first = callhttp(url1, payload);
const second = callhttp(url2, payload);
const third = callhttp(url3, payload);

Promise.all([first, second, third])
    .then(results => {
        // Use all three results here
    });
로그인 후 복사

ES7 비동기/대기:

ES7에서는 async/await 구문은 Promise 결과의 순서 지정 및 처리 프로세스를 간소화하여 더 간단하고 읽기 쉬운 코드를 제공합니다.

async function httpRequests() {
    const firstResponse = await callhttp(url1, payload);
    const secondResponse = await callhttp(url2, payload, firstResponse.apiKey);
    const thirdResponse = await callhttp(url3, payload, firstResponse.apiKey, secondResponse.userId);

    // Use all three responses here
}

httpRequests();
로그인 후 복사

위 내용은 JavaScript에서 Promise 간에 데이터 순서를 효율적으로 지정하고 공유하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿