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 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

In case you’re returning info from a then or catch handler, it should all the time 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 may simply do that as a substitute:

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 may 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

In case you are uncertain in case your incoming worth is a promise already, you may merely use the static technique Promise.resolve(). For instance, in the event you get a variable that will or will not be a promise, merely cross it as an argument to Promise.resolve. If the variable is a promise, the strategy will return the promise; if the variable is a price, the strategy will return a promise resolved to the worth:

let processInput = (maybePromise) => {
  let definitelyPromise = Promise.resolve(maybePromise);
  definitelyPromise.then(doSomeWork);
};

Gotcha #2: .then all the time 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 performed, 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 identical time, which suggests they might full in any order.

The problem right here is we’ve failed to stick to one of many basic guidelines of JavaScript: that arguments to features are all the time evaluated earlier than being handed into the operate. The .then shouldn’t 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 number of methods to repair this.

Trick #1: Wrap the decision in an arrow operate

In case you needed your two features processed sequentially, you might do one thing like this:

// A little 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 might probably name when getAllArticles() has resolved.

Trick #2: Go in named features to .then

You don’t all the time have to make use of inline nameless features as arguments to .then. You may simply assign a operate to a variable and cross the reference to that operate to .then as a substitute.

// 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 await 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 gives when consuming guarantees.

Gotcha #3: Non-functional .then arguments

Now let’s take Gotcha #2 and add a bit additional 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 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. 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 really passing in features to .then.

Trick #1: Go in named features with formal parameters

One strategy to deal with that is to cross in named features that outline a single formal parameter (i.e., take one argument). This permits us to create some generic features that we will use inside a sequence of .then strategies or outdoors the chain.

Let’s say we now have a operate, getFirstArticle, that makes an API name to get the most recent article in a set and resolves to an article object with properties like ID, title, and publication date. Then say we now have 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 features 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 might use an nameless inline operate for this function:

getFirstArticle().then((article) => {
  return getCommentsForArticleId(article.id);
});

Or, we might create a easy operate that takes an article, returns the ID, and chains all the things along with .then:

let extractId = (article) => article.id;
getFirstArticle().then(extractId).then(getCommentsForArticleId);

This second resolution considerably obscures the decision worth of every operate, since they’re not outlined inline. However, then again, it creates some versatile features that we might seemingly 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 straight
  // ... use feedback
}

Right here, we merely await 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 set them in a loop and use await:

// (Unhealthy apply 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 whole.

On this instance, what we need is to ship all these fetchUserDataPromise() requests collectively. However what we get is every one 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 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 whole (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 less complicated method than async/await. (However discover we’re nonetheless utilizing await to attend for Promise.all to finish.)

Conclusion

Though we frequently can use async/await to resolve points in guarantees, it’s crucial to grasp 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 how one can use them successfully in your code.