Comment puis-je consommer le Promise.all pour récupérer les données API JSON? Cela fonctionne bien pour le tirer si je n'utilise pas Promise.all. Avec .all, il renvoie en fait les valeurs de la requête dans la console, mais pour une raison quelconque, je ne peux pas y accéder. Voici mon code et son apparence dans la console après sa résolution.
Promise {<resolved>: {…}}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Object
data: {qry1: Array(35)}
errors: []
Tout ce que je veux, c'est pouvoir accéder à data.qry1. J'ai essayé avec responseText [0] .data.qry1 ou responseText [0] ['data'] ['qry1'] mais il a renvoyé undefined. Voici la sortie de console.log responseText [0]. Le console.log (aa) donne la réponse {type: "basic" ...
Promise.all([
fetch('data.cfc?method=qry1', {
method: 'post',
credentials: "same-origin",
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: $.param(myparams0)
}),
fetch('data.cfc?method=qry2', {
method: 'post',
credentials: "same-origin",
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: $.param(myparams0)
})
]).then(([aa, bb]) => {
$body.removeClass('loading');
console.log(aa);
return [aa.json(),bb.json()]
})
.then(function(responseText){
console.log(responseText[0]);
}).catch((err) => {
console.log(err);
});
5 Réponses :
Aparemment aa.json () et bb.json () sont renvoyés avant d'être résolus, ajouter async / await à cela résoudra le problème:
Promise.all([
fetch('https://jsonplaceholder.typicode.com/todos/1'),
fetch('https://jsonplaceholder.typicode.com/todos/2')
]).then(async([aa, bb]) => {
const a = await aa.json();
const b = await bb.json();
return [a, b]
})
.then((responseText) => {
console.log(responseText);
}).catch((err) => {
console.log(err);
});
.then(async([aa, bb]) => {
const a = await aa.json();
const b = await bb.json();
return [a, b]
})
Toujours à la recherche d'une meilleure explication
aa & bb sont les objets de réponse des requêtes résolues. .json () est lui-même asynchrone et renvoie une promesse avec le contenu du corps résolu. developer.mozilla.org/en-US/docs/Web/ API / Body / json
Au lieu de return [aa.json (), bb.json ()] utilisez return Promise.resolve ([aa.json (), bb.json ()]) < / code>. Consultez la documentation sur Promise.resolve ()
.
La solution la plus simple est de répéter l'utilisation de Promise.all, d'attendre que tout .json () soit résolu. Utilisez simplement
Promise.all([fetch1, ... fetchX])
.then(result => Promise.all(result.map(v => v.json()))
.then(result => {... result[0, ...X] available as objects})
Utilisation de Promise.all pour récupérer les réponses json de chacune des API -
CODE:
[JSON_RESPONSE_API1, JSON_RESPONSE_API2, JSON_RESPONSE_API3]
Dans lequel API_1_Promise, API_2_Promise, API_3_Promise est défini comme
API_1_Promise = fetch(`API_URL_1`, { *Add required headers* }).then(response => response.json())
API_2_Promise = fetch(`API_URL_2`, { *Add required headers* }).then(response => response.json())
API_3_Promise = fetch(`API_URL_3`, { *Add required headers* }).then(response => response.json())
RÉPONSE: Cela imprimera le tableau des réponses de tous les appels d'API Dans la console ->
Promise.all([ API_1_Promise, API_2_Promise, API_3_Promise]) .then(allResults => console.log(allResults)) .catch(err => console.log(err))
Vous pouvez simplement lancer wait devant votre promesse au lieu d'attendre chaque extraction individuelle
await Promise.all([
fetch('https://jsonplaceholder.typicode.com/todos/1'),
fetch('https://jsonplaceholder.typicode.com/todos/2')
]).then(async([aa, bb]) => {
const a = aa.json();
const b = bb.json();
return [a, b]
})
.then((responseText) => {
console.log(responseText);
}).catch((err) => {
console.log(err);
});
J'espère que cela vous aidera