Javascript Promise's are an integral tool to learn in your js journey. They give you the ability to write asynchronous code so you can better control data flows, especially when depending on data requests or making sure things execute in an exact order. There are two ways of interacting with Promise's, passing callbacks or using async/await. Today we will focus on the first approach, passing callbacks. We pass a callback function to the promise, if the callback calls resolve, we will have access to the value passed to resolve, in a .then method we will explain later. If the callback function calls reject we can detect the error from the Promise.
const myCoolPromise = new Promise((resolve, reject) => { // We will write our asynchronous here })
We aren't doing much yet, but this is the basic way to create a promise. We assign a new Promise to a const, and we pass in a callback function into the Promise. The callback function accepts two arguments resolve and reject. We will get back to these later.
const myCoolPromise = new Promise((resolve, reject) => { resolve(100); }) myCoolPromise.then((val) => { console.log(val); // logs out 100 })
Console:
To explain this next example, first we create a new Promise and assign it to a const. It's good to note that a Promise executes immediately upon created, we will get to delaying Promise execution to a later time. For now, we have created a new Promise, and since they execute the callback function immediately, we can then access the resolved value. In this case we called resolve with 100, so now when we check the Promise we should be able to get access to that value. To get the resolved value, we use a .then method.
.then accepts a callback function, the callback accepts a val argument which is the resolved value from the Promise. So we call .then on the promise and console out the value 100!
This is definitely a contrived example, and there is no real reason to use a Promise when doing things that are synchronous, so here is a slightly less contrived example...slightly.
const myCoolPromise = new Promise((resolve, reject) => { setTimeout(() => { resolve('Delayed Value') }, 2000) }) myCoolPromise.then((val) => { console.log(val) // Logs out 'Delayed Value' after 2000 milliseconds })
Console:
As you can see, the .then callback function only gets called once the resolve arg is called in the original Promise. So you can imagine a scenario where you need to wait for an api call to fetch some data. If you use a Promise you can wait for the call to resolve, and .then do something with that data.
Up to this point we've looked at the resolve arg, but now lets talk about the reject arg.
const myCoolPromise = new Promise((resolve, reject) => { // lets pretend we ran into an exception and need to // throw an error reject(new Error('We had an error')) }) myCoolPromise .then((val) => { // this wont get called if reject is called console.log(val) }) .catch((err) => { console.log(err.message) // this consoles out 'We had an error' because we called reject })
Console:
By adding a .catch method, we can pass in an error handling callback function to handle the exception. As you can see, Promises are fairly straight forward but there is a bit of boilerplate to remember.
The best way I have found for remembering Promise syntax is to practice writing and using Promises. Now get out there and start writing some Promises!