JavaScript: Async/Await Wrapper

Reduce the number of try/catch blocks

UpdatedJune 27, 2021

I'm a TypeScript developer based in Oslo, Norway, coding professionally since 2010. I work across the full stack—frontend, backend, and databases—building web applications that are both functional and user-friendly.

Outside of work, I dive into game development with Godot. I'm currently exploring pixel art and using it to bring my hobby projects to life. I'm also passionate about software architecture and always looking for ways to improve the structure, clarity, and maintainability of my code.

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

Angular Developer discovers Redux-Toolkit

Mutable and Immutable State

May 23, 20213 min read273

Angular Developer discovers Redux-Toolkit

React: ContextAPI as State [ UPDATED ]

Updated from Previous Article https://blog.dewaldels.com/react-and-the-contextapi ⛔️ Problems with Previous Approach Although the approach taken in the previous article seemed to work fine, the most severe problem was that any component that used t...

May 21, 20214 min read240

Heroku: Easily Deploy your Vue applications

Deploying a Vue SPA to Heroku

May 20, 20213 min read691

Heroku: Easily Deploy your Vue applications

React and the ContextAPI

An Experiment with State

May 18, 20215 min read141

Mostly TypeScript

5 posts

I am a TypeScript Developer in Oslo, Norway.

Reusable function to run any Promise that returns an array of data and error.

Using Async/Await is great, but when working with multiple Promises it often clutters your code with multiple try/catch statements. I wrote this wrapper to easy encapsulate the try/catch and return an array with the data in the 1st index and the error in the second index.

Source code

GitHub Respository

Wrapper function

export const asyncWrapper = async (asyncFunction, params = null) => {
    try {
        const data = await asyncFunction(params)
        return [data, null]
    }
    catch (error) {
        return [ null, error ]
    }
}

Implementation

// Use them all together! <3 
const handleFetchAllClick = async () => {
    // No gross try/catch everywhere
    const [users, usersError] = await asyncWrapper(fetchUsersRequest)
    const [todos, todosError] = await asyncWrapper(fetchTodosRequest)
    const [user, userError] = await asyncWrapper(fetchUserByIdRequest, 1)
    const [newUser, newUserError] = await asyncWrapper(createUsersRequest, mockUser)
}

Command Palette

Comments

More from this blog

Source code

Wrapper function

Implementation