title: is there any better way to handling axios error with laravel and vue js
body: <p>so i am creating spa web apps using laravel as my backend and vue js as the spa frontend framework. i am using laravel passport for authentication with api. and i am using vuex for controlling my application state.</p>
  
  <p>first i create an api files to interact with api with axios</p>
  
  <pre><code>import { BKCU_CONFIG } from '../config.js';
  
  export default {
  
    getArtikelS: function( p ){
      return axios.get( BKCU_CONFIG.API_URL + '/artikel' + `?column=${p.column}&amp;direction=${p.direction}&amp;per_page=${p.per_page}&amp;page=${p.page}&amp;search_column=${p.search_column}&amp;search_operator=${p.search_operator}&amp;search_query_1=${p.search_query_1}&amp;search_query_2=${p.search_query_2}`);
    },
  
    getArtikelCUS: function( p, id ){
      return axios.get( BKCU_CONFIG.API_URL + '/artikel/indexCU/' + id + `?column=${p.column}&amp;direction=${p.direction}&amp;per_page=${p.per_page}&amp;page=${p.page}&amp;search_column=${p.search_column}&amp;search_operator=${p.search_operator}&amp;search_query_1=${p.search_query_1}&amp;search_query_2=${p.search_query_2}`);
    },
  
    getArtikel: function( id ){
      return axios.get(BKCU_CONFIG.API_URL + '/artikel/' + id);
    },
  
    createArtikel: function(){
      return axios.get(BKCU_CONFIG.API_URL + '/artikel/create');
    },
  
    storeArtikel: function ( form ){
      return axios.post(BKCU_CONFIG.API_URL + '/artikel/store', form);
    },
  
    editArtikel: function( id ){
      return axios.get(BKCU_CONFIG.API_URL + '/artikel/edit/' + id);
    },
  
    updateArtikel: function ( id, form ){
      return axios.post(BKCU_CONFIG.API_URL + '/artikel/update/' + id, form);
    },
  
    updateTerbitkan: function( id ){
      return axios.post(BKCU_CONFIG.API_URL + '/artikel/updateTerbitkan/' + id);
    },
  
    updateUtamakan: function( id ){
      return axios.post(BKCU_CONFIG.API_URL + '/artikel/updateUtamakan/' + id);
    },
  
    deleteArtikel: function( id ){
      return axios.delete(BKCU_CONFIG.API_URL + '/artikel/' + id);
    }
  }
  </code></pre>
  
  <p>and then i create a vuex module for each model ex. article like this:</p>
  
  <pre><code>import ArtikelAPI from '../../api/artikel.js';
  
  export const artikel = {
    state: {
      artikelS: [],
      artikelLoadStatS: '',
      artikel: {},
      artikelLoadStat: '',
      artikelUpdate: '',
      artikelUpdateStat: '',
      artikelRules: [],
      artikelOption: [],
    },
  
    actions: {
  
      // load all
      loadArtikelS( { commit }, p ){
        commit('setArtikelLoadStatS', 'loading');
  
        ArtikelAPI.getArtikelS( p )
          .then( function( response ){
            commit('setArtikelS', response.data.model);
            commit('setArtikelLoadStatS', 'success');
          })
          .catch( error =&gt; {
            commit('setArtikelS', error.response);
            commit('setArtikelLoadStatS', 'fail');
          });
      },
  
      // load by cu
      loadArtikelCUS( { commit }, [p, id] ){
        commit('setArtikelLoadStatS', 'loading');
  
        ArtikelAPI.getArtikelCUS( p, id )
          .then( function( response ){
            commit('setArtikelS', response.data.model);
            commit('setArtikelLoadStatS', 'success');
          })
          .catch( error =&gt; {
            commit('setArtikelS', error.response);
            commit('setArtikelLoadStatS', 'fail');
          });
      },
  
      // load single data
      loadArtikel( {commit}, id ){
        commit('setArtikelLoadStat', 'loading');
  
        ArtikelAPI.getArtikel( id )
          .then( function( response ){
            commit('setArtikel', response.data );
            commit('setArtikelLoadStat', 'success');
          })
          .catch( error =&gt; {
            commit('setArtikelS', error.response);
            commit('setArtikelLoadStatS', 'fail');
          });
      },
  
      // create page
      createArtikel( {commit} ){
        commit('setArtikelLoadStat', 'loading');
  
        ArtikelAPI.createArtikel()
          .then( function( response ){
            commit('setArtikel', response.data.form );
            commit('setArtikelRules', response.data.rules);
            commit('setArtikelOption', response.data.option)
            commit('setArtikelLoadStat', 'success');
          })
          .catch( function(){
            commit('setArtikel', []);
            commit('setArtikelRules', []);
            commit('setArtikelOption', [])
            commit('setArtikelLoadStat', 'fail');
          });
      },
  
      // store data
      storeArtikel( {commit, state, dispatch}, form ){
        commit('setArtikelUpdateStat', 'loading');
  
        ArtikelAPI.storeArtikel( form )
          .then( function( response ){
            if(response.data.saved){
              commit('setArtikelUpdate', response.data);
              commit('setArtikelUpdateStat', 'success');
            }else{
              commit('setArtikelUpdateStat', 'fail');
            }
          })
          .catch(error =&gt; {
            if (error.response.status) {
              this.errors = error.response.data;
              commit('setArtikelUpdate', this.errors);         
            }else{
              commit('setArtikelUpdate', 'Oops terjadi kesalahan :(');
            }
            commit('setArtikelUpdateStat', 'fail');
          });
      },
  
      // edit page
      editArtikel( {commit}, id ){
        commit('setArtikelLoadStat', 'loading');
  
        ArtikelAPI.editArtikel( id )
          .then( function( response ){
            commit('setArtikel', response.data.form );
            commit('setArtikelRules', response.data.rules);
            commit('setArtikelOption', response.data.option)
            commit('setArtikelLoadStat', 'success');
          })
          .catch( function(){
            commit('setArtikel', []);
            commit('setArtikelRules', []);
            commit('setArtikelOption', [])
            commit('setArtikelLoadStat', 'fail');
          });
      },
  
      // update data
      updateArtikel( {commit, state, dispatch}, [id, form] ){
        commit('setArtikelUpdateStat', 'loading');
  
        ArtikelAPI.updateArtikel( id, form )
          .then( function( response ){
            if(response.data.saved){
              commit('setArtikelUpdate', response.data);
              commit('setArtikelUpdateStat', 'success');
            }else{
              commit('setArtikelUpdateStat', 'fail');
            }
          })
          .catch(error =&gt; {
            if (error.response.status) {
              this.errors = error.response.data;
              commit('setArtikelUpdate', this.errors);         
            }else{
              commit('setArtikelUpdate', 'Oops terjadi kesalahan :(');
            }
            commit('setArtikelUpdateStat', 'fail');
          });
      },
      updateArtikelTerbitkan( {commit, state, dispatch}, id ){
        commit('setArtikelUpdateStat', 'loading');
  
        ArtikelAPI.updateTerbitkan( id )
          .then( function( response ){
            if(response.data.saved){
              commit('setArtikelUpdate', response.data);
              commit('setArtikelUpdateStat', 'success');
            }else{
              commit('setArtikelUpdateStat', 'fail');
            }
          })
          .catch(error =&gt; {
            if (error.response.status) {
              this.errors = error.response.data;
              commit('setArtikelUpdate', this.errors);         
            }else{
              commit('setArtikelUpdate', 'Oops terjadi kesalahan :(');
            }
            commit('setArtikelUpdateStat', 'fail');
          });
      },
      updateArtikelUtamakan( {commit, state, dispatch}, id ){
        commit('setArtikelUpdateStat', 'loading');
  
        ArtikelAPI.updateUtamakan( id )
          .then( function( response ){
            if(response.data.saved){
              commit('setArtikelUpdate', response.data);
              commit('setArtikelUpdateStat', 'success');
            }else{
              commit('setArtikelUpdateStat', 'fail');
            }
          })
          .catch(error =&gt; {
            if (error.response.status) {
              this.errors = error.response.data;
              commit('setArtikelUpdate', this.errors);         
            }else{
              commit('setArtikelUpdate', 'Oops terjadi kesalahan :(');
            }
            commit('setArtikelUpdateStat', 'fail');
          });
      },
  
      // delete data
      deleteArtikel( {commit, state, dispatch}, id ){
        commit('setArtikelUpdateStat', 'loading');
  
        ArtikelAPI.deleteArtikel( id )
          .then( function( response ){
            if(response.data.saved){
              commit('setArtikelUpdate', response.data);
              commit('setArtikelUpdateStat', 'success');
            }else{
              commit('setArtikelUpdateStat', 'fail');
            }
          })
          .catch(error =&gt; {
            if (error.response.status) {
              this.errors = error.response.data;
              commit('setArtikelUpdate', this.errors);         
            }else{
              commit('setArtikelUpdate', 'Oops terjadi kesalahan :(');
            }
            commit('setArtikelUpdateStat', 'fail');
          });
      },
  
      // reset status
      resetArtikelUpdateStat( {commit} ){
        commit('setArtikelUpdateStat', '');
      }
    },
  
    mutations: {
      setArtikelS ( state, artikelS ){
        state.artikelS = artikelS;
      },
      setArtikelLoadStatS( state, status ){
        state.artikelLoadStatS = status;
      },
      setArtikel ( state, artikel ){
        state.artikel = artikel;
      },
      setArtikelLoadStat( state, status ){
        state.artikelLoadStat = status;
      },
      setArtikelUpdateStat( state, status ){
        state.artikelUpdateStat = status;
      },
      setArtikelUpdate( state, data ){
        state.artikelUpdate = data;
      },
      setArtikelRules( state, rules ){
        state.artikelRules = rules;
      },
      setArtikelOption( state, option ){
        state.artikelOption = option;
      }
    },
  
    getters: {
      getArtikelS( state ){
        return state.artikelS;
      },
      getArtikelLoadStatS ( state ){
        return state.artikelLoadStatS;
      },
      getArtikel( state ){
        return state.artikel;
      },
      getArtikelLoadStat ( state ){
        return state.artikelLoadStat;
      },
      getArtikelUpdateStat ( state ){
        return state.artikelUpdateStat;
      },
      getArtikelUpdate ( state ){
        return state.artikelUpdate;
      },
      getArtikelRules ( state ){
        return state.artikelRules;
      },
      getArtikelOption ( state ){
        return state.artikelOption;
      }
    }
  }
  </code></pre>
  
  <p>and as you can see, each of my action contain an error catch and it only catch the error and show the message. I find some disadvantage in this way of handling things</p>
  
  <p>maybe someone can help me to improve this kind of workflow, everything is working fine and very structured but i find the error catch is lacking for example: </p>
  
  <ol>
  <li>because i am using laravel then there is the time my token expired (because user leave their pc for a period of time or other things) so it will show an authenticated error message in not very user friendly way, i want to it just redirect user to login page to relogin and then back to the page user currently on</li>
  <li>i think i do a lot of repeating code in here, can i just make a one single error handling for all of this axios request?</li>
  </ol>