I’ve beforehand lined the fundamentals of JavaScript guarantees and the right way to use the async/await key phrases to simplify your current asynchronous code. This text is a extra superior have a look at JavaScript guarantees. We’ll discover 4 frequent methods guarantees journey up builders and methods for resolving them.
Gotcha #1: Promise handlers return guarantees
If you happen to’re returning data 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 write down code like this:
firstAjaxCall.then(() => {
return new Promise((resolve, reject) => {
nextAjaxCall().then(() => resolve());
});
});
Since nextAjaxCall additionally returns a promise, you’ll be able to 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’ll be able to 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
If you’re uncertain in case your incoming worth is a promise already, you’ll be able to merely use the static methodology Promise.resolve(). For instance, in case you get a variable that will or might not be a promise, merely go it as an argument to Promise.resolve. If the variable is a promise, the tactic will return the promise; if the variable is a worth, 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 perform
You’ve in all probability 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 wished a sequential execution, what’s taking place is these two guarantees are basically being began on the identical time, which suggests they might full in any order.
The difficulty right here is we’ve failed to stick to one of many elementary guidelines of JavaScript: that arguments to features are at all times evaluated earlier than being handed into the perform. The .then is just not receiving a perform; it’s receiving the return worth of getArticleById. It’s 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 perform
If you happen to wished your two features processed sequentially, you may do one thing like this:
// A bit of arrow perform is all you want
getAllArticles().then(() => getArticleById(2));
By wrapping the decision to getArticleById in an arrow perform, we offer .then with a perform it may possibly name when getAllArticles() has resolved.
Trick #2: Move in named features to .then
You don’t at all times have to make use of inline nameless features as arguments to .then. You’ll be able to simply assign a perform to a variable and go the reference to that perform to .then as an alternative.
// perform 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 perform and never calling it.
Trick #3: Use async/await
One other technique to make the order of occasions extra clear is to make use of the async/await key phrases:
async perform getSequentially() {
const allArticles = await getAllArticles(); // Look forward to first name
const specificArticle = await getArticleById(2); // Then look ahead to second
// ... use specificArticle
}
Now, the truth that we take two steps, every following the opposite, is express and apparent. We don’t proceed with execution till each are completed. This is a wonderful illustration of the readability await supplies 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 would like it to, however now we’ve uncovered some quirky habits in Promiseland. What do you suppose is the worth of article2 within the final .then?
Since we’re not passing a perform 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 have an extended chain of .then strategies and a few of your handlers are getting values from earlier .then strategies, ensure you’re truly passing in features to .then.
Trick #1: Move in named features with formal parameters
One technique to deal with that is to go in named features that outline a single formal parameter (i.e., take one argument). This permits us to create some generic features that we are able to use inside a sequence of .then strategies or exterior the chain.
Let’s say we have now a perform, 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 have now one other perform, 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 features is to get from the decision worth of the primary perform (an article object) to the anticipated argument worth of the second perform (an article ID). We may use an nameless inline perform for this goal:
getFirstArticle().then((article) => {
return getCommentsForArticleId(article.id);
});
Or, we may create a easy perform that takes an article, returns the ID, and chains every little thing along with .then:
let extractId = (article) => article.id;
getFirstArticle().then(extractId).then(getCommentsForArticleId);
This second answer considerably obscures the decision worth of every perform, since they’re not outlined inline. However, then again, it creates some versatile features that we may possible 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 perform getArticleAndComments() {
const article = await getFirstArticle();
const feedback = await getCommentsForArticleId(article.id); // Extract ID immediately
// ... use feedback
}
Right here, we merely look ahead to 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 need to provoke a number of asynchronous operations without delay, so you place them in a loop and use await:
// (Unhealthy observe under!)
async perform 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 whole.
On this instance, what we need is to ship all these fetchUserDataPromise() requests collectively. However what we get is each occurring sequentially, that 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 perform 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 important to know guarantees themselves so as to actually perceive what the async/await key phrases are doing. The gotchas are supposed that can assist you higher perceive how guarantees work and the right way to use them successfully in your code.
