How to pass data between promise asynchronously? - promise

Question

I want to fetch from the backend several data and process them at the end when they're loaded. Right now, when this code runs, data1 and data2 are undefined. I want to wait for them but I don't know how to keep my code clean. I'm not sure Promise.all() will fit here because I need to save the value of data1 and data2 specificaly and I cannot write general code to resolve for a Promise.all().
return new Promise( (resolve,reject) => {
let data1;
let data2;
let url1 = "http://fakeapi.com/getData1";
fetch(url1)
.then(res => res.json())
.then(data => data1SpecificAction())
.then(data => data1 = data)
.catch("cannot fetch data1")
let url2 = "http://fakeapi.com/getData2";
fetch(url2)
.then(res => res.json())
.then(data => data2 = data)
.catch("cannot fetch data2")
if(data1 && data2) {
resolve()
}
else {
reject()
}
}
How can I fix this snippet?

Answer 1

You don't need a lot of what you have in your question or your answer. You can just do this:
const url1 = "http://fakeapi.com/getData1";
const url2 = "http://fakeapi.com/getData2";
return Promise.all([
fetch(url1).then(res => res.json()).then(data1SpecificAction),
fetch(url2).then(res => res.json())
]).then([data1, data2] => {
if (data1 && data2) return; // resolve
// reject with appropriate error
let msg = data1 ? "missing data2" : "missing data1";
throw new Error(msg);
});
Things you do not need to do in your question and your answer:
Don't wrap existing promises in another manually created promise. That is considered an anti-pattern as the manually created promise is simply not needed. You can just return the promises you already have.
Don't assign a .then() result to a higher scoped variable. Though there are occasionally reasons for this, this is not one of them and is usually a warning sign that you're doing things wrong.
There are some annoyances about the fetch() interface that I find often benefit from a helper function (such as a 404 status resolves, not rejects):
function fetchJson(...args) {
return fetch(...args).then(res => {
if (!res.ok) throw new Error(`Got ${res.status} status`);
return res.json();
});
}
const url1 = "http://fakeapi.com/getData1";
const url2 = "http://fakeapi.com/getData2";
return Promise.all([
fetchJson(url1).then(data1SpecificAction),
fetchJson(url2)
]).then([data1, data2] => {
if (data1 && data2) return; // resolve
// reject with appropriate error
let msg = data1 ? "missing data2" : "missing data1";
throw new Error(msg);
});
And, in your specific case where you want to reject if the result is falsey, you could even do this:
function fetchJsonCheck(...args) {
return fetch(...args).then(res => {
if (!res.ok) throw new Error(`Got ${res.status} status`);
return res.json();
}).then(result => {
if (!result) throw new Error("empty result");
return result;
});
}
const url1 = "http://fakeapi.com/getData1";
const url2 = "http://fakeapi.com/getData2";
return Promise.all([
fetchJsonCheck(url1).then(data1SpecificAction),
fetchJsonCheck(url2)
]);

Answer 2

The solution was to put my specific action into another promises and use promise.all
return new Promise( (resolve,reject) => {
let data1;
let data2;
let promise1 = new Promise( (resolve,reject) => {
let url1 = "http://fakeapi.com/getData1";
fetch(url1)
.then(res => res.json())
.then(data => data1SpecificAction())
.then(data => {
data1 = data;
resolve()
}
.catch(()=>reject("cannot fetch data1"))
})
let promise 2 = new Promise( (resolve,reject) => {
let url2 = "http://fakeapi.com/getData2";
fetch(url2)
.then(res => res.json())
.then(data => {
data2 = data;
resolve()
}
)
.catch(()=>reject("cannot fetch data2"))
})
Promise.all([promise1,promise2])
.then(
() => {
if(data1 && data2) {
resolve()
}
else {
reject()
}
}
)
here is a link explaining how to pass data between promises.