JavaScript で Promise 間でデータを効率的に順序付けして共有するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript で Promise 間でデータを効率的に順序付けして共有するにはどうすればよいですか?

DDD

リリース： 2024-12-01 02:52:11

オリジナル

622 人が閲覧しました

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

Promise チェーンでデータを順序付けして共有する方法

Promise は、JavaScript での非同期操作を管理するための強力なツールを提供します。この一環として、操作を順序立てて操作間でデータを共有することが必要になります。特定の問題に対処しましょう:

Promises による HTTP リクエストとデータ共有の連鎖

このシナリオでは、Promises を使用して一連の HTTP リクエストを実行します。 1 つのリクエストからの応答は、次のリクエストの入力として使用する必要があります。 callhttp 関数はこれらのリクエストを処理しますが、次のリクエストを構築するには前のリクエストのデータにアクセスする必要があります。具体的には、最初のリクエストで取得した API キーを後続のリクエストに渡します。

データ共有とシーケンスのアプローチ

これを実現するには、いくつかのアプローチがあります。

1.連鎖された Promise:

then を使用して Promise を連鎖させ、引数として中間データを渡します:

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.ネストされた Promise:

ネストされた Promise は、以前のすべての結果へのアクセスを維持する:

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 では、非同期/待機構文は、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 中国語 Web サイトの他の関連記事を参照してください。