Need guidance! Trying to learn about fetch() and Promises

Question

Basically I'm trying to fetch the URL and URLPaths for two images I've uploaded (to Firebase) using the firebase function /storeImage and JSON.Stringify().

Below is the snippet of code that enables me to fetch data for the ONE image.

.then(token => {
    authToken = token;
    return fetch("myappURL/storeImage", 
     {
       method: "POST",
       body: JSON.stringify({
       image: image.base64
       }),
       headers: {
         Authorization: "Bearer " + authToken,
       }
      });
    })
    .catch(err => {
        console.log(err);
        alert("Oops! Something went wrong, please try again1")
        dispatch(uiStopLoading());
    })
.then(res => {
        if (res.ok) {
            return res.json();
        } else {
            throw(new Error());
        }
    })
.then(parsedRes => {console.log(parsedRes);

Now I want to fetch data from a second image.

What I gather, from the docs I've read, is that I should use promises for multiple async calls like what I have above. So, shouldn't something like this (see below) work?

.then(token => {
    authToken = token;

    let image =  fetch(... image: image.base64 ...);
    let coverImage = fetch(... coverImage: coverImage.base64 ...);

    Promise.all([image, coverImage])
    .then(ress => { ress.forEach(
      res => {
        process( res.json() ); 
   })
})
.catch(err => {...})
.then(res => {...})
.then(parsedRes => {console.log(parsedRes);)

Spoiler alert. I tried and it didn't. But I cannot understand why.

Answer 1

When you chain promises together, that is, start a new promise inside a then callback you need to return it.

Promise.all returns a single new promise that resolves when all of the promises passed to it resolve. In your code above you're neglecting to return it.

E.g. Try running this code which logs undefined

Promise.resolve()
  .then(() => {
    Promise.all([Promise.resolve(1), Promise.resolve(2)])
  })
  .then(result => console.log(result))

vs this code which logs [1, 2]

Promise.resolve()
  .then(() => {
    return Promise.all([Promise.resolve(1), Promise.resolve(2)])
  })
  .then(result => console.log(result))