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

How to Sequence and Share Data in Promise Chains

Promises offer a powerful tool for managing asynchronous operations in JavaScript. As part of this, it becomes necessary to sequence operations and share data between them. Let's address the specific issue:

Chaining HTTP Requests and Data Sharing with Promises

In this scenario, you're using Promises to perform a series of HTTP requests, where the response from one request should be used as input for the next. The callhttp function handles these requests but needs to access data from previous requests to construct the next one. Specifically, you want to pass the API key obtained from the first request to subsequent requests.

Approaches for Data Sharing and Sequencing

There are several approaches to achieve this:

1. Chained Promises:

Chain the promises using then, passing intermediate data as arguments:

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. Higher Scope Assignment:

Assign intermediate results to variables in a higher scope:

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

3. Accumulate Results:

Store results in an accumulating object:

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. Nested Promises:

Nest promises to maintain access to all previous results:

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. Split with Promise.all():

If some requests can be made independently, break the chain into separate pieces and use Promise.all() to collect the results:

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 Async/Await:

In ES7, the async/await syntax streamlines the process of sequencing and handling promise results, providing a simpler and more readable code:

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();

The above is the detailed content of How to Efficiently Sequence and Share Data Between Promises in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!