У меня есть компонент уведомления, который я использую в своем приложении VueJS. Ниже приведен файл, где происходит волшебство:
import Notifications from "./Notifications.vue";
const NotificationStore = {
state: [], // here the notifications will be added
removeNotification(timestamp) {
const indexToDelete = this.state.findIndex(n => n.timestamp === timestamp);
if (indexToDelete !== -1) {
this.state.splice(indexToDelete, 1);
}
},
addNotification(notification) {
notification.timestamp = new Date();
notification.timestamp.setMilliseconds(
notification.timestamp.getMilliseconds() + this.state.length
);
this.state.push(notification);
},
notify(notification) {
if (Array.isArray(notification)) {
notification.forEach(notificationInstance => {
this.addNotification(notificationInstance);
});
} else {
this.addNotification(notification);
}
}
};
var NotificationsPlugin = {
install(Vue) {
Vue.mixin({
data() {
return {
notificationStore: NotificationStore
};
},
methods: {
notify(notification) {
this.notificationStore.notify(notification);
}
}
});
Object.defineProperty(Vue.prototype, "$notify", {
get() {
return this.$root.notify;
}
});
Object.defineProperty(Vue.prototype, "$notifications", {
get() {
return this.$root.notificationStore;
}
});
Vue.component("Notifications", Notifications);
}
};
export default NotificationsPlugin;
В $ / src / main.js я подключаю плагин к Vue:
Vue.use(Notifications);
Я склонен использовать компонент уведомления при выполнении задачи ajax, как показано ниже:
this.$axios.post( 'login', {
email: self.email,
password: self.password,
remember: self.remember
}).catch(function(error) {
if (error.response) {
if(error.response.status == 422) {
var text = [];
var errors = error.response.data.errors;
var key;
for (key in errors) {
text.push(errors[key]);
}
self.$notify({
message: text.join("<br />"),
icon: "add_alert",
horizontalAlign: "right",
verticalAlign: "top",
type: "warning",
timeout: 10000
});
}else if(error.response.status == 400){
self.$notify({
message: error.response.data.message,
icon: "add_alert",
horizontalAlign: "right",
verticalAlign: "top",
type: "warning",
timeout: 10000
});
}else if(error.response.status == 404){
self.$notify({
message: "(404) Your request could not be identified, please verify submitted data.",
icon: "add_alert",
horizontalAlign: "right",
verticalAlign: "top",
type: "warning",
timeout: 10000
});
}else if(error.response.status == 500){
self.$notify({
message: "(500) There was internal error. Please contact our support team.",
icon: "add_alert",
horizontalAlign: "right",
verticalAlign: "top",
type: "danger",
timeout: 10000
});
}
}else{
self.$notify({
message: "Please verify your internet connection and try again",
icon: "add_alert",
horizontalAlign: "right",
verticalAlign: "top",
type: "danger",
timeout: 10000
});
}
}).then(function (response) {
// handle success
console.log(response);
});
Проблема в том, что я не хочу дублировать часть ошибки catch для axios, поэтому я использовал axios.interceptors.response.use(undefined, function(error) {});
, чтобы переместить обработку ошибок в центральную область. Но сейчас я пытаюсь подключить обработку ошибок axios к self.$notify
. Что я могу сделать, чтобы мои уведомления работали?
axios.interceptors.response.use(undefined, function(error) {
self.$notify({
message: "Hello World",
icon: "add_alert",
horizontalAlign: "right",
verticalAlign: "top",
type: "warning",
timeout: 10000
});
});