A promise is an object that can be used to represent the eventual completion of an a asynchronous operation. Let’s take a look at how we handled asynchronicity within the last lesson using callbacks. So here we have a delay function that creates a delay that waits a certain number of seconds and then invokes a callback. I come over to the terminal and run this. This is our code from the last lesson. We can see the end first tick console log appears first, because that is all of the processing on the first tick. And then we can see our asynchronous callback working. The delay has ended gets logged to the console after a second, so after some time has passed.
Now promises are another way that we can deal with asynchronicity within our code. So I’m goanna go ahead and create the exact same function using a promise. This time we’re not goanna pass a callback to the delay function, all we need are the seconds. We’re goanna use a promise object to actually handle our callback. So the idea behind a promise is that we can wait for an asynchronous operation to complete, and then we can resolve the promise, or we can say that that operation has completed successfully.
So our promise constructor here is actually goanna take a function, where we do the work of the promise. And this function is goanna be passed a function called resolves, and it’s also goanna be passed another function called rejects. So the resolves function will be invoked once we have a successful resolution to the promise, and the rejects function, we can invoke that if something goes wrong. So let’s just start with the resolves function. We’ll go ahead and call our setTimeout. And what we want to do is, opposed to using that callback, we’re goanna use the resolves.
So once we have a successful completion of this promise, we will go ahead and invoke that within the setTimeout, and then we can go ahead and use the seconds times 1000, just like we do inside of our callback function here. So now that we have a promise, using a promise is a little bit different. We don’t have to pass a callback method. In fact, all we have to do is invoke the delay function. And once we invoke the delay function, our promise will wait one second, and then it will pass the successful resolution of the promise to a .then method.
So any handler that we wire up inside of this then method will be invoked next. The then method takes in functions. So what we’re goanna do, once we’re done with this, is console.log, the delay has ended. So here we’ve actually done the exact same thing that we did with our callback, but this time with a promise. I’m goanna go over here to the terminal, node dot to run the code, we can see that the first tick is logged to the console first, and then we see the delay has ended.
So we have some asynchronous code. So in this case, we have our setTimeout, and it’s invoking the resolves method after however many seconds have been passed to our delay function. What I’m goanna go ahead and do is, instead of invoking the resolves method directly, is I’m goanna use a arrow function inside of my setTimeout. So we can see that the first argument of the setTimeout here is a function, and the second argument are the number of seconds that we want the timeout to wait for. So I can also pass data via this resolves method.
So if I wanted to pass the message, the long delay has ended, I can do so. And what happens is this message will then be passed to the function that we send to the .then method. So instead of logging the message directly, I can just go ahead and say console log, message. So let’s go ahead and save this, and I will go ahead and run the code here again. And we get end first tick, and then we get to see our message that has been passed back. One other little trick is the .then method is set to take in functions.
So here’s a function that passes the value for message, and then we log that value. Well console log does the same thing. Console log takes the first argument and logs it to the console. So we can actually just add the console log function to the then chain. So as long as we add a function to this chain, it will go ahead and operate. So let me go ahead and run this again, node dot, and first tick, and we then we see our messages being logged to the console. Now I called this a chain, because we can actually add other .then methods.
So after we do the console log, then we can console log something else if we want. Let’s just go ahead and say, log hello world. So now we’re able to delay for one second, then log the message that we receive from the promise to the console, then we’ll log another message to the console. So these then methods give us a nice way of dealing with our code. So end our first tick, then the long delay was ended, and then we actually see a hello world. Now the neat thing about these then methods is you can also return data.
So let’s say that this then method returned a 42. Well the 42 just becomes the argument that’s passed to the next then method. So I can say hello world, then we can go ahead and write this number to the console. So we’ll clear the current terminal screen and run it one more time. So we end first tick, oops, ah, I’m using single quotes, as opposed to back ticks. So if you want to use a template string, you need to remember to use back ticks, so that we can place that number in the string. Let’s go to the terminal and try this again, node dot, end first tick, the long delay has ended, hello world 42.
So this is a basic introduction to promises. They give us a nice way to handle what happens when a promise succeeds, using a chain of then functions.