Learn extra at:
I’ve beforehand lined the basics of JavaScript promises and how to use the async/await keywords to simplify your current asynchronous code. This text is a extra superior take a look at JavaScript guarantees. We’ll discover 4 widespread methods guarantees journey up builders and methods for resolving them.
Gotcha #1: Promise handlers return guarantees
Should you’re returning info from a then or catch handler, it should at all times be wrapped in a promise, if it isn’t a promise already. So, you by no means want to write down code like this:
firstAjaxCall.then(() => {
return new Promise((resolve, reject) => {
nextAjaxCall().then(() => resolve());
});
});
Since nextAjaxCall additionally returns a promise, you possibly can simply do that as an alternative:
firstAjaxCall.then(() => {
return nextAjaxCall();
});
Moreover, in case you’re returning a plain (non-promise) worth, the handler will return a promise resolved to that worth, so you possibly can proceed to name then on the outcomes:
firstAjaxCall.then((response) => {
return response.importantField
}).then((resolvedValue) => {
// resolvedValue is the worth of response.importantField returned above
console.log(resolvedValue);
});
That is all very handy, however what in case you don’t know the state of an incoming worth?
Trick #1: Use Promise.resolve() to resolve incoming values
In case you are uncertain in case your incoming worth is a promise already, you possibly can merely use the static methodology Promise.resolve(). For instance, in case you get a variable which will or might not be a promise, merely go it as an argument to Promise.resolve. If the variable is a promise, the strategy will return the promise; if the variable is a worth, the strategy will return a promise resolved to the worth:
let processInput = (maybePromise) => {
let definitelyPromise = Promise.resolve(maybePromise);
definitelyPromise.then(doSomeWork);
};
Gotcha #2: .then at all times takes a operate
You’ve most likely seen (and probably written) promise code that appears one thing like this:
let getAllArticles = () => {
return someAjax.get('/articles');
};
let getArticleById = (id) => {
return someAjax.get(`/articles/${id}`);
};
getAllArticles().then(getArticleById(2));
The intent of the above code is to get all of the articles first after which, when that’s executed, get the Article with the ID of two. Whereas we would have needed a sequential execution, what’s occurring is these two guarantees are basically being began on the similar time, which implies they might full in any order.
The problem right here is we’ve failed to stick to one of many elementary guidelines of JavaScript: that arguments to capabilities are at all times evaluated earlier than being handed into the operate. The .then will not be receiving a operate; it’s receiving the return worth of getArticleById. It is because we’re calling getArticleById instantly with the parentheses operator.
There are just a few methods to repair this.
Trick #1: Wrap the decision in an arrow operate
Should you needed your two capabilities processed sequentially, you could possibly do one thing like this:
// A bit arrow operate is all you want
getAllArticles().then(() => getArticleById(2));
By wrapping the decision to getArticleById in an arrow operate, we offer .then with a operate it could possibly name when getAllArticles() has resolved.
Trick #2: Go in named capabilities to .then
You don’t at all times have to make use of inline nameless capabilities as arguments to .then. You possibly can simply assign a operate to a variable and go the reference to that operate to .then as an alternative.
// operate definitions from Gotcha #2
let getArticle2 = () => {
return getArticleById(2);
};
getAllArticles().then(getArticle2);
getAllArticles().then(getArticle2);
On this case, we’re simply passing within the reference to the operate and never calling it.
Trick #3: Use async/await
One other strategy to make the order of occasions extra clear is to make use of the async/await key phrases:
async operate getSequentially() {
const allArticles = await getAllArticles(); // Look forward to first name
const specificArticle = await getArticleById(2); // Then anticipate second
// ... use specificArticle
}
Now, the truth that we take two steps, every following the opposite, is specific and apparent. We don’t proceed with execution till each are completed. This is a superb illustration of the readability await offers when consuming guarantees.
Gotcha #3: Non-functional .then arguments
Now let’s take Gotcha #2 and add just a little further processing to the top of the chain:
let getAllArticles = () => {
return someAjax.get('/articles');
};
let getArticleById = (id) => {
return someAjax.get(`/articles/${id}`);
};
getAllArticles().then(getArticleById(2)).then((article2) => {
// Do one thing with article2
});
We already know that this chain received’t run sequentially as we wish it to, however now we’ve uncovered some quirky conduct in Promiseland. What do you assume is the worth of article2 within the final .then?
Since we’re not passing a operate into the primary argument of .then, JavaScript passes within the preliminary promise with its resolved worth, so the worth of article2 is no matter getAllArticles() has resolved to. If in case you have a protracted chain of .then strategies and a few of your handlers are getting values from earlier .then strategies, be sure to’re truly passing in capabilities to .then.
Trick #1: Go in named capabilities with formal parameters
One strategy to deal with that is to go in named capabilities that outline a single formal parameter (i.e., take one argument). This permits us to create some generic capabilities that we are able to use inside a sequence of .then strategies or exterior the chain.
Let’s say we’ve got a operate, getFirstArticle, that makes an API name to get the latest article in a set and resolves to an article object with properties like ID, title, and publication date. Then say we’ve got one other operate, getCommentsForArticleId, that takes an article ID and makes an API name to get all of the feedback related to that article.
Now, all we have to join the 2 capabilities is to get from the decision worth of the primary operate (an article object) to the anticipated argument worth of the second operate (an article ID). We may use an nameless inline operate for this goal:
getFirstArticle().then((article) => {
return getCommentsForArticleId(article.id);
});
Or, we may create a easy operate that takes an article, returns the ID, and chains the whole lot along with .then:
let extractId = (article) => article.id;
getFirstArticle().then(extractId).then(getCommentsForArticleId);
This second answer considerably obscures the decision worth of every operate, since they’re not outlined inline. However, then again, it creates some versatile capabilities that we may possible reuse. Discover, additionally, that we’re utilizing what we discovered from the primary gotcha: Though extractId doesn’t return a promise, .then will wrap its return worth in a promise, which lets us name .then once more.
Trick #2: Use async/await
As soon as once more, async/await can come to the rescue by making issues extra apparent:
async operate getArticleAndComments() {
const article = await getFirstArticle();
const feedback = await getCommentsForArticleId(article.id); // Extract ID instantly
// ... use feedback
}
Right here, we merely anticipate getFirstArticle() to complete, then use the article to get the ID. We are able to do that as a result of we all know for positive that the article was resolved by the underlying operation.
Gotcha #4: When async/await spoils your concurrency
Let’s say you wish to provoke a number of asynchronous operations without delay, so you set them in a loop and use await:
// (Dangerous observe under!)
async operate getMultipleUsersSequentially(userIds) {
const customers = [];
const startTime = Date.now();
for (const id of userIds) {
// await pauses the *complete loop* for every fetch
const person = await fetchUserDataPromise(id);
customers.push(person);
}
const endTime = Date.now();
console.log(`Sequential fetch took ${endTime - startTime}ms`);
return customers;
}
// If every fetch takes 1.5s, 3 fetches would take ~4.5s whole.
On this instance, what we need is to ship all these fetchUserDataPromise() requests collectively. However what we get is each occurring sequentially, which means the loop waits for every to finish earlier than persevering with to the following.
Trick #1: Use Promise.all
Fixing this one is straightforward with Promise.all:
// (Requests occur concurrently)
async operate getMultipleUsersConcurrently(userIds) {
console.log("Beginning concurrent fetch...");
const startTime = Date.now();
const guarantees = userIds.map(id => fetchUserDataPromise(id));
const customers = await Promise.all(guarantees);
const endTime = Date.now();
console.log(`Concurrent fetch took ${endTime - startTime}ms`);
return customers;
}
// If every fetch takes 1.5s, 3 concurrent fetches would take ~1.5s whole (plus a tiny overhead).
Promise.all says to take all of the Guarantees within the array and begin them without delay, then wait till they’ve all accomplished earlier than persevering with. On this use case, guarantees are the easier method than async/await. (However discover we’re nonetheless utilizing await to attend for Promise.all to finish.)
Conclusion
Though we regularly can use async/await to resolve points in guarantees, it’s crucial to grasp guarantees themselves with a purpose to actually perceive what the async/await key phrases are doing. The gotchas are meant that will help you higher perceive how guarantees work and learn how to use them successfully in your code.
