How to I consume the Promise.all fetch api json data? It works fine to pull it if I don't use Promise.all. With .all it actually returns the values of the query in the console but for some reason I'm not able to access it. Here is my code and how it looks in the console after it resolves.
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);
});
All I want is to be able to access data.qry1. I tried with responseText[0].data.qry1 or responseText[0]['data']['qry1'] but it returned undefined. This below is the output from console.log responseText[0]. The console.log(aa) gives Response {type: "basic" ...
Promise {<resolved>: {…}}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Object
data: {qry1: Array(35)}
errors: []
Aparently aa.json() and bb.json() are returned before being resolved, adding async/await to that will solve the problem :
.then(async([aa, bb]) => {
const a = await aa.json();
const b = await bb.json();
return [a, b]
})
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);
});Still looking for a better explaination though