How to handle multiple async requests?

Question

So in my app the user is able to upload 1 to 3 pictures and when he hits the save button I upload them to firebase.

This is my code so far and I know it is horrible and I am looking for a way to make it efficient.

    if (img1) {
      uploadImage(img1, 'image/jpeg', 'imageOne', uuid)
      .then(() => {
        console.log('Image 1 was uploaded succesfully');

      }).catch(err => console.log(err));
    }

    if (img2) {
      uploadImage(img2, 'image/jpeg', 'imageTwo', uuid)
      .then(() => {
        console.log('Image 2 was uploaded succesfully');

      }).catch(err => console.log(err));
    }

    if (img3) {
      console.log('there is img3')
      uploadImage(img3, 'image/jpeg', 'imageThree', uuid)
      .then(() => {
        console.log('Image 3 was uploaded succesfully');

      }).catch(err => console.log(err));
    }

The thing is that I want to redirect the user to the home page when the upload finishes. But it is hard to decide where the redirect-code should go.

I thought about doing nested if statements like so:

if (img1) {
      uploadImage(img1, 'image/jpeg', 'imageOne', uuid)
      .then(() => {
        console.log('Image 1 was uploaded succesfully');

        if (img2) {
          uploadImage(img2, 'image/jpeg', 'imageTwo', uuid)
          .then(() => {
            console.log('Image 2 was uploaded succesfully');

          }).catch(err => console.log(err));
        }


      }).catch(err => console.log(err));
    }

but what If the user uploaded just img2 and not img1? Then img2 would never be uploaded. How can I improve my code?

This has been asked a lot here, please search the archives for async javascript and you'll see a multitude of answers. In a nutshell, use this: caolan.github.io/async — Graham
– Graham, Commented Aug 9, 2017 at 16:49
Please see that solution: stackoverflow.com/questions/13912775/… — Zim84
– Zim84, Commented Aug 9, 2017 at 16:50

user184994 · Accepted Answer · 2017-08-09 16:50:45Z

2

You can use Promise.all

let promises = [];
if (img1) {
    promises.push(uploadImage(img1, 'image/jpeg', 'imageOne', uuid);
}
if (img2) {
    promises.push(uploadImage(img2, 'image/jpeg', 'imageTwo', uuid);
}

// etc...

Promise.all(promises).then(() => {console.log("All requests are done")})

answered Aug 9, 2017 at 16:50

user184994

18.3k2 gold badges51 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Walter Monecke Over a year ago

Is Promise.all native to JS? No Libraries? @jdubjdub mentions bluebirdJS.

Ripon Over a year ago

Promise.all is native to JS. developers.google.com/web/fundamentals/getting-started/primers/…

jdubjdub · Accepted Answer · 2017-08-09 16:51:08Z

1

check out Promise.all - Bluebird is a good library for promises, though native is totally cool too now. http://bluebirdjs.com/docs/api/promise.all.html

would look something like this:

var p = [];

if (img1) p.push(uploadImg(img1...));
if (img2) p.push(uploadImg(img2...));
if (img3) p.push(uploadImg(img3...));

return Promise.all(p).then(function() {
    // redirection here
});

answered Aug 9, 2017 at 16:51

jdubjdub

6237 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to handle multiple async requests?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related