How to pass data between promise asynchronously?

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:

1. 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.
2. 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.