Streamlining Vuex actions with async/await and higher-order functions

actions.js

import axios from 'axios';

export const fetchSomeData = async (store, params) => {
  try {
    const res = await axios.get(`endpoint/${params.id}`);
    return store.commit('SET_SOME_DATA', res.data.result);
  } catch (error) {
    console.error(error.message);
  }
};

export const fetchSomeOtherData = async (store, params) => {
  try {
    const res = await axios.get(`otherEndpoint/${params.user.name}`);
    return store.commit('SET_SOME_OTHER_DATA', res.data.result);
  } catch (error) {
    console.error(error.message);
  }
};

// etc etc

betterActions.js

import axios from 'axios';

const errorHandler = functionToHandle => {
  return (...handledFunctionParams) => {
    functionToHandle(...handledFunctionParams).catch(error => {
      console.error(error.message);
    });
  }
};

export const fetchSomeData = errorHandler(async (store, params) => {
  const res = await axios.get(`endpoint/${params.id}`);
  return store.commit('SET_SOME_DATA', res.data.result);
});

export const fetchSomeOtherData = errorHandler(async (store, params) => {
  const res = await axios.get(`otherEndpoint/${params.user.name}`);
  return store.commit('SET_SOME_OTHER_DATA', res.data.result);
});

errorHandlers.js

import messenger from '@/utilities/messenger';

export const errorHandler = functionToHandle => {
  return (...handledFunctionParams) => {
    return functionToHandle(...handledFunctionParams).catch((error) => {
      console.error(error.message);
    });
  }
};

export const errorHandlerWithMessage = functionToHandle => {
  return (...handledFunctionParams) => {
    return functionToHandle(...handledFunctionParams).catch((error) => {
      console.error(error.message);
      return messenger.error(error.message);
    });
  }
};

export const errorHandlerCustom = (functionToHandle, customHandler) => {
  return (...handledFunctionParams) => {
    return functionToHandle(...handledFunctionParams).catch(customHandler);
  }
};

evenBetterActionsThanBefore.js

import axios from 'axios';
import functionThatAcceptsAnError from 'error-handling-service';
import { errorHandler, errorHandlerCustom } from '@/utilities/errorHandlers';

export const fetchSomeData = errorHandler(async (store, params) => {
  const res = await axios.get(`endpoint/${params.id}`);
  return store.commit('SET_SOME_DATA', res.data.result);
});

export const fetchSomeOtherData = errorHandlerCustom(async (store, params) => {
  const res = await axios.get(`otherEndpoint/${params.user.name}`);
  return store.commit('SET_SOME_OTHER_DATA', res.data.result);
}, functionThatAcceptsAnError);

No more ugly try/catch blocks for each individual async operation! Using a higher-order factory function you can generate your async functions and append the same catch clause every time. If you want to get fancy you can even have different factory functions for different common use cases, or pass in a custom handler.

Thanks, mate, I looking the whole internet to get some ways to avoid the try/catch and your code is so simple and elegant,

Please go to dev.to or medium and publish a blog post about it, so anyone can use it!