I am starting to hate JavaScript. Before I blow my head with a gun, someone, please tell me how to work with JavaScript Promises.
For further actions, you may consider blocking this person and/or reporting abuse
For further actions, you may consider blocking this person and/or reporting abuse
Programming In Blood -
Abdullah Al Mamun Fahim -
Ridoy Hasan -
Sonay Kara -
Top comments (23)
You know what a callback is, right?
Let's take the following example:
The
onTimeout
function takes acallback
which will be stored for later use. The later use is the timeout that triggers after 1 second.Problem here? When we call
onTimeout
too late, the timeout could be already have triggered, so we would add the callback, but nothing happens.Solution? Promises!
How do they work? Easy, they are monads :D
Joke aside...
They are objects you can attach your callbacks to.
Here we create a
Promise
object instead, often you get the final object from a function as return-value, so you don't have to think about how they are created, you often just have to call thethen
method on it and pass a callback.Here we create one on our own, it takes a callback that receives two functions.
resolve
has to be called when the asynchronous process finishes successfully.reject
has to be called when it fails.As you may notice, this callback isn't the callback from the previous example. It's a wrapper to make a promise from a non-promise/callback function.
Anyway, promises bring you nice things:
You can call
then
as often as you like, the callbacks get all called when the promise succeeds.You can call
then
whenever you like, the callbacks get called right away if the promise has succeeded in the past.You can chain promises with
then
to make asynchronous calls based on other asynchronous calls.The
then
method returns a new promise. Thefetch
function also returns a promise.If we pass a callback to
then
that returns a promise itself,then
will return this new promise.In our example, the first
then
call returns whatfetch
returns, becausefetch
returns a promise.The
json
method of ourresponse
object also returns a promise, sothen
will return that promise.In the third
then
callback, we return a value from that parsed JSON, sothen
creates a new promise for us that resolves to that value. This allows us to chain synchronous and asynchronous calls withthen
.So this example could be written a bit shorter:
I hope this helps, if you got any questions, ask away :)
One little thing I'll add because I often see beginners get this wrong: (you wrote this but I still want to really emphasize this)
Don't have nested then blocks!
then
is a special function because it can return either a new promise or a concrete value. If you want to perform two promises sequentially, simple return the next promise from the then block.Instead of
You can write
Which is much more readable. In functional terms,
then
is bothbind
andmap
, depending on the return value.There is at least one good case in which it is defensible to nest
.then
, and that's when you want to some shared reference in both callbacks.There are several solutions to sharing scope between earlier and later callbacks, including:
A) Create a mutable outer-scope
let
variable and assign it partway down the promise chain: this is probably the most intuitive solution, but does involve some (disciplined) mutation and pollution of the outer scope.B) Use a promise library with a feature that passes along state information in an implicit parameter, e.g. Bluebird and
this
(though that technically breaks the A+ spec); this is the least portable and most opaque way.C) use a nested promise chain, which introduces a little local callback indentation and verbosity but which does not pollute an outer scope or require any mutation:
You can use this technique to pass both results down the chain by returning a container object such as an object or array:
The absolutely important thing however is to remember to
return
the internal promise chain, otherwise your nextthen
will fire before the internal chain has actually settled.In practice, I more often use some outer-scope
let
binding over nested promise chains, but the latter are perfectly valid if done correctly.How is this not a blogpost on itself :D
Hey, thanks for explaining. This answer helps a lot.
Men, thanks for the promises information.
Think of a regular JS array as an envelope. You put one (or more) values into the envelope, and it gives you extra behaviour like
map
andreduce
In fact, we can say that JavaScript arrays are envelopes that have the special property of including multiple values.
Promises are similar. They are envelopes just like arrays are, but the special property they have is they handle future/potential/asynchronous values.
This is especially useful for managing asynchronous problems. By using a functional approach, Promise flows can be written in a top-down, left-to-right manner:
I get it now...
Thanks a lot!
Yup!
The non-eli5 answer is that Promises are (not 100% but basically) monads that encode asynchronous behaviour
Got it. :)
Like you are five? Ok....
You ask your mum if you can have some sweets later. She can either resolve sweets ( yes you can have some), or reject your request (no sweets for you. You’ve been naughty).
When it gets to later, if her promise resolved (ie she said you can have some) THEN you can eat them. Otherwise, you have to CATCH the tears you cry because you can’t eat sweets. Simple, huh?
A promise contains a resolve and reject. When it is actually called (the function is invoked), if it resolves, use THEN, or CATCH the rejection.
I've written a blog post explaining Promises. Hope it can help you in understanding.
I would also love if you could go through and point out anything that can be improved!
alazierplace.com/2018/09/promises-...
Hey, thanks a lot. I will check it out. :)
Adding my post on the subject, hoping it's useful :)
dev.to/flaviocopes/understanding-j...
Thank you very much. :)
Here's another thread where I answered a similar question: dev.to/shubhambattoo/explain-x-lik...
Promises can be confusing! Don't expect yourself to understand them right away.
Hey, thanks for sharing.
And yes, promises are hard to adapt.
Once you have graduated from promise school, you can check out some helpful tips I wrote for promises dev.to/kepta/promising-promise-tip...
Hey, thank you. :)
I will look it up.
Maybe not 5 exactly, but I did the most basic explanation right here: dev.to/ardennl/about-promises-and-...
Hey, thanks for sharing. :)
3 Javascript creepy concepts explained to my mom
Miguel Ruiz
Thanks a lot for sharing. :) Very much helpful.