VUE的ajax拦截器

简介: 先介绍第一种  基于饿了么组件中的全局ajax请求等待的书写方法main.js中import EventBus from './../src/core/EventBus';Vue.

先介绍第一种  基于饿了么组件中的全局ajax请求等待的书写方法

main.js中

import EventBus from './../src/core/EventBus';

Vue.use(EventBus);

Vue.http.interceptors.push((request, next) => {

// before sending request

EventBus.$emit('toggleLoading')

next((response => {

// after sending request

EventBus.$emit('toggleLoadingEnd')

}));

});



eventBus文件

import Vue from 'vue';

const EventBus = new Vue();

export default EventBus;



Vue文件中

import EventBus from './../core/EventBus’;

mounted() {

console.log("加载完成App.vue");

EventBus.$on('toggleLoading', () => {

this.$loading({ fullscreen: true })

});

EventBus.$on('toggleLoadingEnd', () => {

this.$loading({ fullscreen: true }).close();

});

}

相关文章
|
2天前
|
JavaScript
vue组件中的插槽
本文介绍了Vue中组件的插槽使用,包括单个插槽和多个具名插槽的定义及在父组件中的使用方法,展示了如何通过插槽将父组件的内容插入到子组件的指定位置。
|
3天前
|
缓存 JavaScript 前端开发
vue-day02计算属性,v-bind,v-if,v-for
文章介绍了Vue.js中的计算属性、class与style的绑定、条件渲染和列表渲染的使用。通过示例代码展示了如何使用计算属性简化模板逻辑、如何通过v-bind动态绑定class和style、如何使用v-if进行条件渲染以及如何使用v-for进行列表渲染。这些特性使得Vue.js在构建动态用户界面时更加灵活和强大。
vue-day02计算属性,v-bind,v-if,v-for
|
3天前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
vue项目中使用vue-router进行路由配置及嵌套多级路由
|
4天前
|
JavaScript
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
本文讨论了在使用Vue和Element UI实现树形数据和懒加载时遇到的“Maximum call stack size exceeded”错误,指出问题的原因通常是因为数据中的唯一标识符`id`不唯一,导致递归渲染造成调用栈溢出。
14 1
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
|
1天前
|
JavaScript 前端开发 IDE
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
|
1天前
|
JavaScript 前端开发 API
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
|
1天前
|
JavaScript
|
3天前
|
JavaScript
vue项目中引入阿里图标iconfont
该文章指导如何在Vue项目中引入并使用阿里图标库Iconfont,包括图标的选取、下载配置文件及在项目中引入和使用图标的具体步骤。
|
3天前
|
JavaScript 网络架构
|
3天前
|
JavaScript 前端开发 Java
vue-day03 组件基础
文章介绍了Vue.js中组件的基础概念、注册格式、命名方式、全局与局部注册的区别、prop属性的详细使用以及通过prop向子组件传递数据的方法,并提供了计数器和博文小组件的实例。
下一篇
无影云桌面