Please give this post a 💓, 🦄, or 🔖 if it you enjoyed it!
JavaScript touts asynchronous programming as a feature. This means that, if any action takes a while, your program can continue doing other things while the action completes. Once that action is done, you can do something with the result. This turns out the be a great feature for functionality like data fetching, but it can be confusing to newcomers. In JavaScript, we have a few different ways to handle asynchronicity: callback functions, Promises, and async-await.
I make other easy-to-digest tutorial content! Please consider:
- Subscribing to my DevTuts mailing list
- Subscribing to my DevTuts YouTube channel
Callback Functions
A callback function is a function you provide that will be executed after completion of the async operation. Let’s create a fake user data fetcher and use a callback function to do something with the result.
The Fake Data Fetcher
First we create a fake data fetcher that doesn’t take a callback function. Since fakeData doesn’t exist for 300 milliseconds, we don’t have synchronous access to it.
const fetchData = userId => {
setTimeout(() => {
const fakeData = {
id: userId,
name: 'George',
};
// Our data fetch resolves
// After 300ms. Now what?
}, 300);
};
In order to be able to actually do something with our fakeData, we can pass fetchData a reference to a function that will handle our data!
const fetchData = (userId, callback) => {
setTimeout(() => {
const fakeData = {
id: userId,
name: 'George',
};
callback(fakeData);
}, 300);
};
Let’s create a basic callback function and test it out:
const cb = data => {
console.log("Here's your data:", data);
};
fetchData(5, cb);
After 300ms, we should see the following logged:
Here's your data: {id: 5, name: "George"}
Promises
The Promise object represents the eventual completion of an operation in JavaScript. Promises can either resolve or reject. When a Promise resolves, you can handle its returned value with then then method. If a Promise is rejected, you can use the catch the error and handle it.
The syntax of the Promise object is as follows:
new Promise(fn);
Were fn is a function that takes a resolve function and, optionally, a reject function.
fn = (resolve, reject) => {};
The Fake Data Fetcher (with Promises)
Let’s use the same fake data fetcher as before. Instead of passing a callback, we’re going to return a new Promise object the resolves with our user’s data after 300ms. As a bonus, we can give it a small chance of rejecting as well.
const fetchData = userId => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() < 0.1) {
reject('Fetch failed!');
}
const fakeData = {
id: userId,
name: 'George',
};
resolve(fakeData);
}, 300);
});
};
Our new fetchData function can be used as follows:
fetchData(5)
.then(user => {
console.log("Here's your data:", user);
})
.catch(err => {
console.error(err);
});
If fetchData successfully resolves (this will happen 90% of the time), we will log our user data as we did with the callback solution. If it is rejected, then we will console.error the error message that we created (“Fetch failed!“)
One nice thing about Promises is you can chain then to execute subsequent Promises. For example, we could do something like this:
fetchData(5)
.then(user => {
return someOtherPromise(user);
})
.then(data => {
console.log(data);
})
.catch(err => {
console.error(err);
});
Furthermore, we can pass an array of Promises to Promise.all to only take action after all Promises are resolved:
Promise.all([fetchData(5), fetchData(10)])
.then(users => {
console.log("Here's your data:", users);
})
.catch(err => {
console.error(err);
});
In this case, if both Promises are successfully resolved, the following will get logged:
Here's your data:
[{ id: 5, name: "George" }, { id: 10, name: "George" }]
Async-Await
Async-await offers a different syntax for writing Promises that some find clearer. With async-await, you can create an async function. Within that async function, you can await the result of a Promise before executing subsequent code! Let’s look at our data fetch example.
const fetchUser = async userId => {
const user = await fetchData(userId);
console.log("Here's your data:", user);
};
fetchUser(5);
Pretty nice, right? One small wrinkle: we’re not handling our Promise rejection case. We can do this with try/catch.
const fetchUser = async userId => {
try {
const user = await fetchData(userId);
console.log("Here's your data:", user);
} catch (err) {
console.error(err);
}
};
fetchUser(5);
Browser/Node Support
Since callback functions are just normal functions being passed to other functions, there’s no concern about support. Promises have been standard since ECMAScript 2015 and have decent support, but are not supported in Internet Explorer. Async-await is newer (standard since ECMAScript 2017) and is has good support in newer browser versions. Again, it isn’t supported in Internet Exporer.
On the node side, async-await (and therefore, Promises) have been well-supported since nove v7.6.
Top comments (10)
Possible typographical errors:
Under the section "Promises" you wrote:
In the last paragraph you wrote:
Thanks for sharing. Nice comparison of the three approaches. I needed to see something like this.
Though, I struggled to see how async and await syntax works compared with promises syntax. I see now how
asyncreplacesresolveandawaitreplaces.then- this guide explains it well:javascript.info/async-await
Also it defines functions using traditional syntax rather than
constand arrow functions so it was easier to read to learn async syntax.Thank you for the clean explanation, I'm surely going to refactor my code with promises. I did not know that promises can be chained :)
This is the best explanation of promises, callback,async/await i have read so far.
Thank you!!
Great article! I've been using async/await syntax ever since and now I see how valuable understanding of that can be for productive workflows.
Excellent and clear explanation! Bravo!
A very clean and crisp example to explain the concepts. Loved it!
Astounding post
Gained a lot of knowledge with deleting many confusions. 👌
Why some people use async/await and promises at the same time, for example in Axios(who return a promise) using async with try catch