You are viewing our Forum Archives. To view or take place in current topics click here.
How to use promises in javascript
Posted:
How to use promises in javascriptPosted:
Status: Offline
Joined: Nov 05, 201311Year Member
Posts: 2,749
Reputation Power: 452
Status: Offline
Joined: Nov 05, 201311Year Member
Posts: 2,749
Reputation Power: 452
I was bored and wrote this in like 20 minutes so let me know if you find any mistakes
My explanation:
some references:
Last edited by CriticaI ; edited 2 times in total
My explanation:
So in javascript you have probably seen/ used something like this.
You call a function which has some arguments, then when everything in that function is done, you run the code in the callback function.
Which pretty easy to read right?
Well what if I wanted to do something else inside my callback which also required a callback?
as you can see that is a little bit harder to read. now image if you had like 4 or 5 callbacks inside of each other with several if statements and loops. It would be very messy and hard to read. This is referred to as callback hell. And it looks something like this.
[ Register or Signin to view external links. ]
What if I told you there was a way to clean up your code? something like this.
Well that is what a promise looks like in javascript.
First let's learn how to make a promise. It's not as easy as putting '.then' at the end of function.
In javascript there is a native class called Promise and as you can guess, to make a promise you will need to create an instance of that class. Like so.
Notice the resolve and reject functions. Think of these as return statements. When you use resolve, the corresponding data will be passed to the ".then" method. When you use reject, the data will be passed to the ".catch" method. But as soon as either "resolve" or "catch" is called, the function stops running and returns the data. Like I said, it's like a return statement.
That's great and all, but what if we want to pass arguments to our promise? Well it's pretty simple, just make a function, but return the promise.
so now that we have our promises. we can use the ".then" method
and if we want to chain them together just return the next promise
doSomeThing(args, function () {
// run this code when it is done
})
You call a function which has some arguments, then when everything in that function is done, you run the code in the callback function.
Which pretty easy to read right?
Well what if I wanted to do something else inside my callback which also required a callback?
doSomeThing(args, function () {
// run this code when it is done
doSomeThingElse(args, function () {
// run this code when it is done doing something else
})
})
as you can see that is a little bit harder to read. now image if you had like 4 or 5 callbacks inside of each other with several if statements and loops. It would be very messy and hard to read. This is referred to as callback hell. And it looks something like this.
[ Register or Signin to view external links. ]
What if I told you there was a way to clean up your code? something like this.
doSomething(args)
.then(function () {
// run this code when it is done
return doSomeThingElse(args)
})
.then(function () {
// run this code when it is done doing something else
})
Well that is what a promise looks like in javascript.
First let's learn how to make a promise. It's not as easy as putting '.then' at the end of function.
In javascript there is a native class called Promise and as you can guess, to make a promise you will need to create an instance of that class. Like so.
myPromiseWithoutArgs = new Promise(function(resolve, reject) {
if (5+5 == 10) resolve()
else reject("you don't know math")
});
Notice the resolve and reject functions. Think of these as return statements. When you use resolve, the corresponding data will be passed to the ".then" method. When you use reject, the data will be passed to the ".catch" method. But as soon as either "resolve" or "catch" is called, the function stops running and returns the data. Like I said, it's like a return statement.
myMathPromise()
.then( function () {
// run this code if it equals 10
})
.catch( function () {
// run this code when 5+5 =10. which is never
})
That's great and all, but what if we want to pass arguments to our promise? Well it's pretty simple, just make a function, but return the promise.
function add(a, b) {
var answer = a + b
return new Promise(function(resolve, reject) {
if (answer > 10) resolve(answer)
else reject("it's less than or equal to 10")
});
}
so now that we have our promises. we can use the ".then" method
add(3,7)
.then( function (myresult) {
// run this code if it is greater 10
console.log(myresult)
})
.catch( function (myerror) {
// run this code if it is less than 10
console.log(myerror)
})
and if we want to chain them together just return the next promise
add(5,7)
.then( function (myresult) {
// run this code if it is greater 10
console.log(myresult)
return anotherPromise()
})
.then( function () {
// run code if the promise was resolved
return anotherPromise2()
})
.then( function () {
// run code if the promise was resolved
return anotherPromise3()
})
some references:
Last edited by CriticaI ; edited 2 times in total
#2. Posted:
Status: Offline
Joined: Jun 05, 201311Year Member
Posts: 5,361
Reputation Power: 27398
Motto: Chat is... well you know...
Motto: Chat is... well you know...
Status: Offline
Joined: Jun 05, 201311Year Member
Posts: 5,361
Reputation Power: 27398
Motto: Chat is... well you know...
Never really knew what this was tbh but after reading through it kinda get it
- 0useful
- 0not useful
#3. Posted:
Status: Offline
Joined: Jan 16, 201212Year Member
Posts: 20,271
Reputation Power: 17066
Motto: 2b || !2b
Motto: 2b || !2b
Status: Offline
Joined: Jan 16, 201212Year Member
Posts: 20,271
Reputation Power: 17066
Motto: 2b || !2b
Am learning a few things in JS atm, so I'ma bookmark this for reference. Thanx
- 0useful
- 0not useful
#4. Posted:
Status: Offline
Joined: Nov 02, 201311Year Member
Posts: 4,340
Reputation Power: 1865
Status: Offline
Joined: Nov 02, 201311Year Member
Posts: 4,340
Reputation Power: 1865
Nice ! , will refer to this learning javascript this semester
- 0useful
- 0not useful
#5. Posted:
Status: Offline
Joined: Nov 05, 201311Year Member
Posts: 2,749
Reputation Power: 452
Status: Offline
Joined: Nov 05, 201311Year Member
Posts: 2,749
Reputation Power: 452
Gavin- wrote Nice ! , will refer to this learning javascript this semester
Yeah they're fairly new and not supported in the old browsers so your teacher probably doesn't even know about them.
- 0useful
- 0not useful
#6. Posted:
Status: Offline
Joined: Oct 12, 201113Year Member
Posts: 6,154
Reputation Power: 26327
Motto: I'm probably brain damaged or something idk
Motto: I'm probably brain damaged or something idk
Status: Offline
Joined: Oct 12, 201113Year Member
Posts: 6,154
Reputation Power: 26327
Motto: I'm probably brain damaged or something idk
nice post man should help some people out
- 0useful
- 0not useful
You are viewing our Forum Archives. To view or take place in current topics click here.