This blog is all about a simple TypeScript function.

Let me simply just put the code here first -

async function safeAsync<T>(
  promise: Promise<T>
): Promise<[T | null, Error | null]> {
  try {
    const data = await promise;
    return [data, null];
  } catch (e) {
    const err = e instanceof Error ? e : new Error(String(e));
    return [null, err];
  }
}

Ok, cat’s out of the bag now. But what exactly it is ?

As many can deduce, its a TypeScript function which takes in a promise and return an array of 2 elements.

• First one being the data if promise resolves.
• Second one being the error if promise rejects.

But why ?

1. To clean up the try/catch clutter!

Lets look at an example wherein we make a HTTP call via fetch -

async function getListOfAllUsers() {
  try {
    const res = await fetch("https://reqres.in/api/users?page=2");
    return await res.json();
  } catch (e) {
    console.error(e);
    return;
  }
}

That’s seems about right, right ? We all are familiar with this pattern.

But with safeAsync function, it can look like -

async function getListOfAllUsers() {
  const [res, err] = await safeAsync(
    fetch("https://reqres.in/api/users?page=2")
  );
  if (err) {
    console.error(err);
    return;
  }
  if (res) return await res.json();
}

It might look a bit controversial when dealing with just 1 promise, but then, think about a scenario where multiple promises are needed to be resolved in a single function with all of them having their separate error handling.

safeAsync will flourish there, and will make the code look more readable.

2. Consistency throughout the application code.

If all errors are handled via safeAsync, any new developer will be able to get quickly onboard with this approach.

Plus, if a rule has been made to use this utility with any promise encountered within the code, the developer can feel safe and not worry about failing to catch some rogue error originated from a promise.

3. It can work with any promise returning function.

This utility works with any promise or any function returning any promise.

4. Code looks more readable, and makes more sense.

Well that’s just my opinion, what about you ?

No, I am serious, do let me know your thoughts on this if you haven’t seen this before.

I have already seen this utility being adapted in many professional projects and I wish to utilize this more in the future.

Thanks!