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

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!