网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/5 浏览:3 次 )

最近在做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);
 });

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

上一篇:浅谈Node框架接入ELK实践总结
下一篇:JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap