vue工程全局设置ajax的等待动效的方法

 更新时间:2019年02月22日 09:21:08   作者:田臭脸  
这篇文章主要介绍了vue工程全局设置ajax的等待动效的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

最近在做vue的项目,使用了element-ui作为ui组件库,采用vuex进行状态管理,与后台的请求交互采用axios库实现,原本做的页面,ajax请求个数也只有三个,将等待动画的显示和隐藏通过mutation去控制,但是项目越来越大,请求也越来越多,能否将这个等待动画与ajax的请求相关联呢?

实现等待动效

在element-ui中,提供了两个方法进行调用loading组件,一个是在需要遮罩的div容器中添加v-loading指令,另一种就是以服务形式调用:Loading.service(options),在本项目中,在加载数据时,进行全局遮罩,所以设置let loadingInstance = Loading.service({fullscreen:true})。关闭服务形式的调用:loadingInstance.close();

axios的拦截器

个人对拦截器的作用的理解是,在请求发送前和响应处理前,对该ajax请求进行一定的设置或者处理,方便对工程内的ajax请求进行统一处理,减少重复代码。

 //请求拦截器
 axios.interceptors.request.use((config) => {
  // 在发送请求之前做些什么
  return config;
 }, (error) => {
  // 对请求错误做些什么
  return Promise.reject(error);
 });
 // 添加响应拦截器
 axios.interceptors.response.use((response) => {
  // 对响应数据做点什么
  return response;
 }, (error) => {
  // 对响应错误做点什么
  return Promise.reject(error);
 });

有了拦截器,我们可以想到,在ajax请求发送前开启loading动画,在接收响应后关闭loading动画。但是要对每个ajax都开关一下loading动画吗?其实不必。只需要实现一个ajax的计数器,在个数大于0时,开启动画,在个数为0的时候,关闭动画。

计数器实现

let loadingInstance;
let loadCounter = {
  count:0,
  show:() => {
    if(count < 0){
     this.count ++;
     loadingInstance = Loading.service({fullscreen:true});
    }
  },
  hide:()=>{
    if(count > 0){
      this.count --;
      this.$nextTick(()=>{//以服务的方式调用的 Loading 需要异步关闭
        loadingInstance.close();
      });
    }
  }
}

使用方法

 //请求拦截器
 axios.interceptors.request.use((config) => {
  loadCounter.show();
  return config;
 }, (error) => {
  return Promise.reject(error);
 });
 // 添加响应拦截器
 axios.interceptors.response.use((response) => {
  loadCounter.hide();
  return response;
 }, (error) => {
  return Promise.reject(error);
 });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue 使用class创建和清除水印的示例代码

    vue 使用class创建和清除水印的示例代码

    这篇文章主要介绍了vue 使用class创建和清除水印的示例代码,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • Vue首屏性能优化组件知识点总结

    Vue首屏性能优化组件知识点总结

    在本篇文章里小编给大家整理了一篇关于Vue首屏性能优化组件知识点总结,有需要的朋友们可以跟着学习下。
    2021-11-11
  • Vue+OpenLayers 创建地图并显示鼠标所在经纬度(完整代码)

    Vue+OpenLayers 创建地图并显示鼠标所在经纬度(完整代码)

    这篇文章主要介绍了Vue+OpenLayers 创建地图并显示鼠标所在经纬度,本文使用的是高德地图,结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-11-11
  • vue父组件与子组件之间的数据交互方式详解

    vue父组件与子组件之间的数据交互方式详解

    最近一直在做一个vue移动端商城的实战,期间遇到一个小小的问题,值得一说,下面这篇文章主要给大家介绍了关于vue父组件与子组件之间数据交互的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • Vue2.x Todo之自定义指令实现自动聚焦的方法

    Vue2.x Todo之自定义指令实现自动聚焦的方法

    我们希望用户双击 todo 进入编辑状态后输入框自动获取焦点,而不是需要先手动点一下。这篇文章主要介绍了Vue 2.x Todo之自定义指令实现自动聚焦,非常具有实用价值,需要的朋友可以参考下
    2019-01-01
  • 拖拽插件sortable.js实现el-table表格拖拽效果

    拖拽插件sortable.js实现el-table表格拖拽效果

    本文主要介绍了拖拽插件sortable.js实现el-table表格拖拽效果,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • vue parseHTML函数源码解析start钩子函数

    vue parseHTML函数源码解析start钩子函数

    这篇文章主要为大家介绍了vue parseHTML函数源码解析start钩子函数,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • VueJs路由跳转——vue-router的使用详解

    VueJs路由跳转——vue-router的使用详解

    本篇文章主要介绍了VueJs路由跳转——vue-router的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • Vue-axios-post数据后端接不到问题解决

    Vue-axios-post数据后端接不到问题解决

    这篇文章主要介绍了Vue-axios-post数据后端接不到问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • vue项目中Toast字体过小,没有边距的解决方案

    vue项目中Toast字体过小,没有边距的解决方案

    这篇文章主要介绍了vue项目中Toast字体过小,没有边距的解决方案。具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论