需求來源:向後臺請求數據時後臺掛掉了,後臺響應就出現錯誤,不作處理界面就卡住了,這時須要在main.js中使用axios的響應攔截器在出現相應錯誤是給出提示。項目使用element-ui,就調用裏面的Message 消息提示、MessageBox 彈框、Notification 通知三種方式中的一種。vue
import Vue from 'vue'; import ElementUI from 'element-ui'; // 添加響應攔截器 axios.interceptors.response.use(function (response) { // 對響應數據作點什麼 // console.log('對響應數據作點什麼') return response; }, function (error) { // 對響應錯誤作點什麼 console.log(ElementUI) //Message 消息提示 ElementUI.Message({ message: '恭喜你,這是一條成功消息', type: 'success' }); //Notification 通知 ElementUI.Notification({ title: '警告', message: '這是一條警告的提示消息', type: 'warning' }); //MessageBox 彈框 ElementUI.MessageBox({ title: '標題名稱', message: '這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案' }); return Promise.reject(error); });
Message 消息提示、MessageBox 彈框、Notification 通知等方法的調用方式和在.vue文件中時不同的,這一點要注意,他們是ElementUI中這項方法的封裝的原始方法
ElementUI.Message 對應的是this.$message方法
ElementUI.Notification 對應的是this.$notify方法
ElementUI.MessageBox 對應的是this.$alert方法
console.log(ElementUI)就能夠知道緣由