如何嵌套promise.all

Question

I'm using es6 and have the following promises. What i want is the next Promise.all to wait for previous Promise.all to be completed before execute the next one. I have tried with the below codes but it's not working, only Promise 1 is resolved.

var deletePromises = [];
arr.menuItems.forEach((item, idx) => {
  if (item.replace) {
     deletePromises.push(deleteFromFirebase(user.uid, item));
  }
});

// Promise 1
Promise.all(deletePromises).then(res1 => {
  var uploadPromises = [],  updateRecordPromises = [];

  arr.menuItems.forEach((item, idx) => {
    uploadPromises.push(uploadToFirebase(user.uid, item));
  });

  // Promise 2
  Promise.all(uploadPromises).then(res2 => {
    arr.menuItems.forEach((item, idx) => {
      item.replace = false;
      updateRecordPromises.push(updateRecord(user.uid, item));
    });

    // Promise 3
    Promise.all(updateRecordPromises).then(res3 => { 
        console.log('All promise execute with successfully');
    });
 });
});

MarkM Answer

Try to use chaining as Mark suggest but the problem still there. I had found where the problem was, it is uploadPromises that never get resolved and then is never get called.

uploadToFirebase function

Stuck here, but the file is successfully uploaded. I can see all the files.

const uploadToFirebase = (userid, item) => {
 return new Promise((resolve, reject) => {
    const uploadUri = Platform.OS === "ios"
      ? RNFetchBlob.wrap(item.pic_url.replace("file://", ""))
     : RNFetchBlob.wrap(item.pic_url);

    Blob.build(uploadUri, {
      type: "image/png;"
    }).then(blob => {
     // upload image using Firebase SDK
    firebase
    .storage()
    .ref("menu_items")
    .child(userid)
    .child(item.new_filename)
    .put(blob, { contentType: "image/png" })
    .then(snapshot => {
      console.log("Promise resolve: ", snapshot);
      resolve(snapshot);
      blob.close();
    })
    .catch(error => {
      reject(error.message);
    });
  });
 });
};

Updated code

console.log('Print res2') is not printed

var deletePromises = [],
uploadPromises = [],
updateRecordPromises = [];

arr.menuItems.forEach((item, idx) => {
  if (item.replace) {
    deletePromises.push(deleteFromFirebase(user.uid, item));
  }
});

Promise.all(deletePromises)
.then(res1 => {
  console.log("Print res1:", res1);
  arr.menuItems.forEach((item, idx) => {
    uploadPromises.push(uploadToFirebase(user.uid, item));
  });

  return Promise.all(uploadPromises);
})
.then(res2 => {
  console.log("Print res2:", res2);
  dispatch({ type: MENU_UPDATE_SUCCESS, payload: arr });
  dispatch(reset("menuItem"));
})
.catch(error => {
  console.log("Print error:", error);
});

Answer 1

You don't need to nest the Promises, you can return your new Promise.all from then() , which will let you chain them. Easier with an example:

var arr = [1, 2, 3, 4, 5, 6]

function slowF(i) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(i), i*200)
    })
}
var p = arr.map((i) => slowF(i))


Promise.all(p)
.then((p) => {
    console.log("In first Promise.all resolving: ", p)
    var newP = p.map(i => slowF(i) )
    return Promise.all(newP)   
})
.then((p)=>{
    console.log("In second Promise.all resolving: ", p)
})
.catch((e) => console.log("error: ", e))

Answer 2

I found the solution. It is because one of menuItems array prop -> new_filename is empty, thats why promise never get resolved. So, i just need to add empty checking for each of item prop and then the promise was resolved properly. Thanks to @MarkM for the answer. Now the code much more cleaner and easier to read compare to the nested promise.

Promise.all(deletePromises)
.then(res1 => {
  console.log("Print res1:", res1);
  arr.menuItems.forEach((item, idx) => {
    if (!isEmpty(item.new_filename)) {
      uploadPromises.push(uploadToFirebase(user.uid, item));
    }
  });

  return Promise.all(uploadPromises);
})
.then(res2 => {
  console.log("Print res2:", res2);
  dispatch({ type: MENU_UPDATE_SUCCESS, payload: arr });
  dispatch(reset("menuItem"));
})
.catch(error => {
  console.log("Print error:", error);
});