Wasiu Idowu
A JavaScript Promise is created with the new Promise constructor function - new Promise()
. A promise will let you start some work that will be done asynchronously and let you get back to your regular work. When you create the promise, you must give it the code that will be run asynchronously. You provide this code as the argument of the constructor function:
new Promise(function () {
window.setTimeout(function createSundae(flavor = 'chocolate') {
const sundae = {};
}, Math.random() * 2000);
});
This code creates a promise that will start in a few seconds after I make the request. Then there are a number of steps that need to be made in the createSundae
function.
But once that's all done, how does JavaScript notify us that it's finished and ready for us to pick back up? It does that by passing two functions into our initial function. Typically we call these resolve
and reject
.
The function gets passed to the function we provide the Promise constructor - typically the word "resolve" is used to indicate that this function should be called when the request completes successfully. Notice the resolve
on the first line:
new Promise(function (resolve, reject) {
window.setTimeout(function createSundae(flavor = 'chocolate') {
const sundae = {};
resolve(sundae);
}, Math.random() * 2000);
});
Now when the sundae has been successfully created, it calls the resolve
method and passes it the data we want to return - in this case the data that's being returned is the completed sundae. So the resolve
method is used to indicate that the request is complete and that it completed successfully .
If there is a problem with the request and it couldn't be completed, then we could use the second function that's passed to the function. Typically, this function is stored in an identifier called "reject" to indicate that this function should be used if the request fails for some reason. Check out the reject
on the first line:
new Promise(function (resolve, reject) {
window.setTimeout(function createSundae(flavor = 'chocolate') {
const sundae = {};
if ( /* iceCreamConeIsEmpty(flavor) */ ) {
reject(`Sorry, we're out of that flavor :-(`);
}
resolve(sundae);
}, Math.random() * 2000);
});
So the reject
method is used when the request could not be completed . Notice that even though the request fails, we can still return data - in this case we're just returning text that says we don't have the desired ice cream flavor.
A Promise constructor takes a function that will run and then, after some amount of time, will either complete successfully (using the resolve
method) or unsuccessfully (using the reject
method). When the outcome has been finalized (the request has either completed successfully or unsuccessfully), the promise is now fulfilled and will notify us so we can decide what to do with the response.
The first thing to understand is that a Promise will immediately return an object.
const myPromiseObj = new Promise(function (resolve, reject) {
// sundae creation code
});
That object has a .then()
method on it that we can use to have it notify us if the request we made in the promise was either successful or failed. The .then()
method takes two functions:
the function to run if the request completed successfully
the function to run if the request failed to complete
mySundae.then(function(sundae) {
console.log(`Time to eat my delicious ${sundae}`);
},
function(msg) {
console.log(msg);
self.goCry(); // not a real method
});
As you can see, the first function that's passed to .then()
will be called and passed the data that the Promise's resolve
function used. In this case, the function would receive the sundae
object. The second function will be called and passed the data that the Promise's reject
function was called with. In this case, the function receives the error message "Sorry, we're out of that flavor :-(" that the reject
function was called with in the Promise code above
Wasiu breaks down complex topics into smaller, simpler bits
Agatha on Oct 25, 2022
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, asperiores eaque blanditiis repellendus ducimus totam error incidunt? Neque, error adipisci?
Mandy Mandolorian on Oct 25, 2022
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae maxime asperiores porro sint dolores quibusdam, aspernatur odit assumenda explicabo rem vero quae quasi, cum sed consequatur commodi error totam doloribus temporibus qui quas! Vero praesentium ullam quisquam quis eum, adipisci incidunt veniam possimus numquam! Fuga iusto praesentium provident nisi numquam.
Ladeep on Oct 11, 2022
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor eveniet qui quis aliquam sunt esse itaque quaerat quo beatae nesciunt officia explicabo, corrupti quasi aut quisquam eum libero? Ea porro maiores debitis! Repellendus corrupti quaerat nisi assumenda consequatur saepe, fugit itaque inventore, quod dolorem est vero tempore numquam architecto aliquam.
Mandy Mandolorian on Oct 9, 2022
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi aliquid libero repellendus praesentium hic incidunt possimus quis eos laudantium consequuntur odit vel, maiores soluta natus dolores architecto dignissimos nisi culpa deleniti dolor. Exercitationem officia enim eveniet debitis tempore quia quaerat consectetur assumenda asperiores vel repudiandae quas libero, nobis ad natus ipsa fuga quae odio. Ipsa numquam alias, reiciendis eius laboriosam consequatur ab, corporis maxime nam ad fugiat aut! Molestias, veritatis. Velit eligendi est atque quisquam numquam similique cupiditate nisi consequatur labore vero odio, itaque asperiores voluptatum veniam expedita illo voluptas doloremque? Iure, esse soluta! Eligendi ex sapiente omnis nisi provident.
Ian kirkby on Oct 9, 2022
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, aut totam? Sapiente esse nulla molestias quas quo nobis consequuntur voluptatem.