CODEWITHSUNDEEP
vue.jsvuejs2vue-componentaxios
tzortzik
tzortzik

Reputation: 5143

axios interceptors integration with vuejs custom components for displaying error messages in a generic way

Let's suppose we have the following piece of code 

axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  if (error.response.status === 400) {
    if (error.response.data.type === "fieldsValidationErrors") {
      openModal(modal.validationsFailedInfo);
    } else {
      openModal(modal.cannotHandleServerResponse);
    }
  } else if(error.response.status === 403) {
    redirectToLoginScreen();
  } else {
    openModal(modal.errorOccurred);
  }
  return Promise.reject(error);
});

This code is included before

const app1 = new Vue({...});
app1.init();

I also have another UI app:

const app2 = new Vue({...});
app2.init();

The axios interceptors are declared before declaring the vue instances.

Inside each vue app I have a <notifications type="danger" :messages="errors.items"></notifications> component that receives the errors from the app.

Inside the notifications component I have

Vue.component('notifications', {
  ...
  template: '<section v-if="messages.length > 0" id="notifications" class="notifications-outer-wrapper">\n' +
    '    <div class="user-notification-content well form-group" :class="{ \'notify-danger\': type === \'danger\', \'notify-success\': type === \'success\' }">\n' +
    '      <span class="fa fa-info-circle notificationIcon" aria-hidden="true"></span>\n' +
    '      &nbsp;\n' +
    '      <span v-if="type === \'danger\'">{{message}}</span>\n' +
    '    </div>\n' +
    '  </section>'
});

Currently I am using modals to display that something went wrong. What I need is to display an error messages inside the <notifications> component, each Vue instance having one notification component.

Any ideas on how to obtain this behavior?

Upvotes: 1

Views: 1911

Answers (1)

Jacob Goh
Jacob Goh

Reputation: 20845

You can use global event bus to communicate between separate instances.

// create a new Event Bus Instance
$eventBus = new Vue();

// set $eventBus as global Vue variable
// has to be done before new Vue({el: ...})
// after this, $eventBus instance can be acessed using this.$eventBus in all Vue components
Vue.prototype.$eventBus = $eventBus;

axios.interceptors.response.use(function(response) {
    return response;
}, function(error) {
    // ...

    // on error, emit an open modal event, add pass message as payload
    $eventBus.emit('open-modal', {
        type: 'error',
        message: '...'
    });
});

Vue.component('notifications', {
    created() {
        // listen to open-modal event
        this.$eventHub.$on('open-modal', ({
            type,
            message
        }) => {
            // logic for opening modal, etc...
        });
    },
    beforeDestroy() {
        this.$eventHub.$off('open-modal');
    },
});

const app1 = new Vue({ /* ... */ });
const app2 = new Vue({ /* ... */ });

Upvotes: 6

Related Questions