I’ve beforehand lined the fundamentals of JavaScript guarantees and the best way to use the async/await key phrases to simplify your present asynchronous code. This text is a extra superior have 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
If you happen to’re returning info from a then or catch handler, it would at all times be wrapped in a promise, if it isn’t a promise already. So, you by no means want to put in writing 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 the event 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 the event you don’t know the state of an incoming worth?
Trick #1: Use Promise.resolve() to resolve incoming values
If you’re uncertain in case your incoming worth is a promise already, you possibly can merely use the static technique Promise.resolve(). For instance, in the event you get a variable that will or is probably not a promise, merely move it as an argument to Promise.resolve. If the variable is a promise, the tactic will return the promise; if the variable is a price, the tactic 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 in all probability seen (and presumably 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 finished, get the Article with the ID of two. Whereas we would have needed a sequential execution, what’s occurring is these two guarantees are primarily being began on the similar time, which suggests they may 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 a couple of methods to repair this.
Trick #1: Wrap the decision in an arrow operate
If you happen to needed your two capabilities processed sequentially, you can do one thing like this:
// A bit of 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 actually name when getAllArticles() has resolved.
Trick #2: Move 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 move 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 ahead to first name
const specificArticle = await getArticleById(2); // Then watch for 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 supplies when consuming guarantees.
Gotcha #3: Non-functional .then arguments
Now let’s take Gotcha #2 and add a little bit further processing to the tip 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 habits 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. When you’ve got an extended 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: Move in named capabilities with formal parameters
One strategy to deal with that is to move 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 outdoors 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 objective:
getFirstArticle().then((article) => {
return getCommentsForArticleId(article.id);
});
Or, we may create a easy operate that takes an article, returns the ID, and chains all the pieces 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, alternatively, it creates some versatile capabilities that we may probably reuse. Discover, additionally, that we’re utilizing what we realized 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 watch for getFirstArticle() to complete, then use the article to get the ID. We will 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 need to provoke a number of asynchronous operations directly, so you place them in a loop and use await:
// (Unhealthy observe under!)
async operate getMultipleUsersSequentially(userIds) {
const customers = [];
const startTime = Date.now();
for (const id of userIds) {
// await pauses the *whole 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 complete.
On this instance, what we need is to ship all these fetchUserDataPromise() requests collectively. However what we get is every one occurring sequentially, which means the loop waits for every to finish earlier than persevering with to the subsequent.
Trick #1: Use Promise.all
Fixing this one is easy 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 complete (plus a tiny overhead).
Promise.all says to take all of the Guarantees within the array and begin them directly, 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 essential to know 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 the best way to use them successfully in your code.
