Maison > interface Web > js tutoriel > Comment séquencer et partager efficacement des données entre promesses en JavaScript ?

Comment séquencer et partager efficacement des données entre promesses en JavaScript ?

DDD
Libérer: 2024-12-01 02:52:11
original
621 Les gens l'ont consulté

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

Comment séquencer et partager des données dans des chaînes de promesses

Les promesses offrent un outil puissant pour gérer les opérations asynchrones en JavaScript. Dans ce cadre, il devient nécessaire de séquencer les opérations et de partager les données entre elles. Abordons le problème spécifique :

Chaînage des requêtes HTTP et du partage de données avec des promesses

Dans ce scénario, vous utilisez des promesses pour effectuer une série de requêtes HTTP, où la réponse à une demande doit être utilisée comme entrée pour la suivante. La fonction callhttp gère ces requêtes mais doit accéder aux données des requêtes précédentes pour construire la suivante. Plus précisément, vous souhaitez transmettre la clé API obtenue lors de la première requête aux requêtes suivantes.

Approches de partage et de séquençage des données

Il existe plusieurs approches pour y parvenir :

1. Promesses enchaînées :

Enchaînez les promesses en utilisant then, en passant des données intermédiaires comme 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);
    });
Copier après la connexion

2. Affectation de portée supérieure :

Attribuer des résultats intermédiaires à des variables d'une portée supérieure :

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

3. Accumuler les résultats :

Stocker les résultats dans un objet cumulatif :

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
    });
Copier après la connexion

4. Promesses imbriquées :

Nest promet de maintenir l'accès à tous les résultats précédents :

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
                    });
            });
    });
Copier après la connexion

5. Divisez avec Promise.all() :

Si certaines demandes peuvent être faites indépendamment, divisez la chaîne en morceaux séparés et utilisez Promise.all() pour collecter les résultats :

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
    });
Copier après la connexion

ES7 Async/Await :

Dans ES7, la syntaxe async/wait rationalise le processus de séquençage et de gestion promettre des résultats, en fournissant un code plus simple et plus lisible :

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();
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal