DEV Community

Cover image for All (or just most) of what you need to know about handling Promises

All (or just most) of what you need to know about handling Promises

Ori Volfovitch on October 06, 2019

I Don't use Promises on a daily basis. But when I do, all I need is a simple usage example of how to handle them. What I find instead are over comp...
Collapse
 
karataev profile image
Eugene Karataev

What's the reason to have promise hell in the first example when you can just chain promises one after another?

longPromise()
    .then((data)=>{
        console.log(data); // logs: longPromise resolved
        return shortPromise();
    .then((data)=>{
        console.log(data) // logs: shortPromise resolved
    })
});
Collapse
 
orivolfo profile image
Ori Volfovitch • Edited

Not sure what you mean.
You just removed the .catch(), which means you do not handle in case of rejection.

Collapse
 
joetex profile image
Joel Ruiz • Edited

You can chain the Promises. Inside of .then(), you can return another promise and it'll let you add another .then() underneath. You add a single .catch() at very end, which will work for all the .then() chains.

longPromise()
    .then((data)=>{
        console.log(data); // logs: longPromise resolved
        return shortPromise();
    .then((data)=>{
        console.log(data) // logs: shortPromise resolved
    })
    .catch((error)=> {
         console.log(error);
    })
});
Collapse
 
karataev profile image
Eugene Karataev

Yeah, as Joel mentioned, you can return promises to get one flat promise chain.
Imagine that you have 4 promises. If you follow example 1 in your post, you'll get promise structure like callback hell, but if you return next promise in every then, you'll get nice and flat promise chain.

Thread Thread
 
orivolfo profile image
Ori Volfovitch • Edited

Oh, now I understand.
Wow, this is worth editing the original post!

Thanks!

Thread Thread
 
efishtain profile image
efi shtain

Another improvement you can make is not using anonymous function
It gives you testability and readability
So instead of:

longPromise()
.then((data)=>{
console.log(data); // logs: longPromise resolved
return shortPromise();
.then((data)=>{
console.log(data) // logs: shortPromise resolved
})
.catch((error)=> {
console.log(error);
})
});

you can do:
async function firstHandler(data){
console.log(data)
return shortPromise()
}

longPromise.then(firstHandler).then(console.log).catch(console.log)

Collapse
 
iamthehttp profile image
IamTheHttp

Hey Ori,
Looks good,
I'd add a few 'Gotchas' and maybe some more information here!

  1. When using async/await it's very difficult to use finally and catch, async await only deals with 'resolve'

  2. Promises are a great way (and I think the only way) to add a micro task into the event loop, micro tasks are the only way to ensure execution before the next tick. (done with Promise.resolve())

  3. You could probably await a Promise.all() as well, as it returns a promise

Other than that, good stuff!

Collapse
 
orivolfo profile image
Ori Volfovitch

Thanks!