-1

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.

Reuben
  • 141
  • 12
  • Could you provide some information on the issue, like the error or the result you got? – Mario Santini Aug 20 '18 at 09:02
  • I think you should return the *Promise.all* to continue chaining the promises. – Mario Santini Aug 20 '18 at 09:03
  • I appreciate the edits done by @gil. But I don't know what should I do next? I tried to press the Next button but it says I need 2k reputation to review suggested edits. – Reuben Aug 20 '18 at 09:03
  • You're able to use then in the code above because fetch returns a Promise https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch – t3__rry Aug 20 '18 at 09:13
  • @MarioSantini I tried to answer you questions in the post below, and I've included the full code there as well. Maybe it'll help paint a better picture for you https://stackoverflow.com/questions/51927545/issue-using-fetch-and-promises-to-extract-url-and-url-path-for-multiple-image – Reuben Aug 20 '18 at 09:17
  • @Reuben I mean you had should add the result of your code, if is not an error, you has should explained why is not ok and what you're expecting. To help people understand your issue. Anyway, you got an answer now and you're not supposed to change your question from now. – Mario Santini Aug 20 '18 at 09:24
  • @MarioSantini yeah I saw the answer by Jed only once I posted my answer to you. I tried to explain it here, but I felt it was easier if I showed you and explain using the code. – Reuben Aug 20 '18 at 09:29

1 Answers1

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))
Jed Richards
  • 12,244
  • 3
  • 24
  • 35