Est-il possible d'utiliser axios.le tout avec une alors() pour chaque promesse?

J'ai une Réagir la composante qui déclenche un événement pour extraire des données. Il en résulte un nombre dynamique de procédure stockée appels d'extraction des données, et les données de chaque appel est stocké dans un emplacement totalement différent. Ensuite, j'ai besoin de re-rendre une fois que toutes les données sont reçues et disponible. Je suis à l'aide de promesses avec axios.

Puisque le nombre d'axios appels est dynamique, je suis en train de construire un tableau et de l'insérer dans axios.all comme suit:

let promises = [];

for (let i = 0; i < requests.length; i++) {
    promises.push(axios.get(request[i].url, { params: {...} }));
}

axios.all(promises).then(/* use the data */);

Le problème est que chaque axios requête retourne des données qui s'ajoute à un objet dans un tout autre endroit. Depuis je n'ai aucun moyen de les mettre tous dans le bon endroit dans un seul then (comment pourrais-je savoir quelle réponse va dans quel endroit?), J'ai essayé de faire quelque chose comme ceci:

let promises = [];

for (let i = 0; i < requests.length; i++) {
    promises.push(
        axios.get(request[i].url, { params: {...} })
            .then(response => {myObject[request[i].saveLocation] = response.data;})
    );
}

axios.all(promises).then(/* use the data */);

Toutefois, cela ne fonctionne pas comme je l'espérais. Le then après chaque get est exécuté, mais pas jusqu'à ce que bien après la then attaché à axios.all. C'est évidemment un problème parce que mon code tente d'utiliser les données avant qu'il a été enregistré à l'objet.

Est-il un moyen d'avoir un then à appeler pour chaque axios.get qui sera exécuté après son correspondant promesse est résolu, et puis, un dernier then qui sera exécuté qu'après tous les promesses sont résolus, à utiliser les données maintenant que l'objet a été rempli?

"comment pourrais-je savoir quelle réponse va dans quel endroit?" - elles viennent de sortir dans le même ordre qu'elles ont été édictées
Je ne vois pas pourquoi ce code ne fonctionne pas. Qu'est-ce exactement ne /* use the data */ ressembler?

InformationsquelleAutor nanoguy | 2017-04-27

25

Bien, alors j'ai trouvé un moyen de faire ce dont j'avais besoin sans l'aide de l'aide d'un then sur chaque get. Depuis les paramètres transmis à axios.get contenir suffisamment d'informations pour déterminer l'emplacement d'enregistrement, et depuis je ne peux lire les params de retour de la réponse, je peux faire quelque chose comme ce qui suit:
```
let promises = [];

for (let i = 0; i < requests.length; i++) {
    promises.push(axios.get(request[i].url, { params: {...} }));
}

axios.all(promises)
    .then(axios.spread((...args) => {
        for (let i = 0; i < args.length; i++) {
            myObject[args[i].config.params.saveLocation] = args[i].data;
        }
    }))
    .then(/* use the data */);
```
Cela garantit que toutes les données sont reçues et enregistrées à l'objet avant de l'utiliser.

InformationsquelleAutor nanoguy
2

Si le comportement de votre deuxième tentative est en effet comme cela, alors ce serait une indication que axios n'est pas la Promesse/A+ conforme. Le then rappel de la valeur de retour doit être la valeur à laquelle la promesse retourné par cette then est remplie. Depuis c'est la promesse de vous enfoncer dans le tableau, la valeur axios.all serait de retour pour que la promesse ne peut être connu que par l'exécution de la then rappels de première.

Événement si vous ne retourne pas une valeur explicitement dans le then de rappel, cela n'affecte pas la règle ci-dessus: dans ce cas, la valeur de retour est undefined et il est que valeur qui doit être fourni par axios.all une fois que le correspondant promesse est résolu.

Voir en particulier les règles 2.2.7, 2.2.7.1, 2.3.2.1, 2.3.2.2 dans les specs de la Promesse/A+).

Alors je vous suggérons d'utiliser une Promesse/A+ conforme à la promesse de la mise en œuvre à la place. Il y a plusieurs autres bibliothèques, comme par exemple demande-la promesse.

Sinon, vous pouvez utiliser le natif de l'ES6 Promesse de la mise en œuvre, et promisify le http.demande méthode vous-même.

ES6 offre Promise.all qui garantit aux valeurs résolues dans le même ordre que les promesses ont été fournis.
- Intéressant. J'ai trouvé un moyen d'avoir un then après chaque get, mais je vous remercie de votre réponse. Maintenant, il semble encore plus étrange que axios se comporte comme il le fait.
InformationsquelleAutor trincot

votre code initial pourrait fonctionner normalement comme prévu si vous passez les promesses de votre tableau joint avec leurs then fonction

let promises = []; //array to hold all requests promises with their then
for (let i = 0; i < requests.length; i++) {
    //adding every request to the array
    promises.push(
        axios.get(request[i].url, { params: { ...} })
            .then(response => { myObject[request[i].saveLocation] = response.data; })
    );
}
//Resolving requests with their callbacks before procedding to the last then callback
axios.all(promises).then(/* use the data */);

Votre bloc de code est essentiellement identique au bloc de code dans la question. Juste les commentaires et l'espacement sont différents.
exactement , je voulais juste ajouter des commentaires à son code à lui montrer lorsque la promesse est exécuté.

InformationsquelleAutor mohamed hussein

Vous devez vous connecter pour publier un commentaire.