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中axios的基本用法详解
axios 是一个基于promise用于浏览器和 nodejs 的 HTTP 客户端，这篇文章主要介绍了Vue中axios的基本用法及axios的特征和使用注意细节，本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
2022-07-07
Antd中单个DatePicker限定时间输入范围操作
这篇文章主要介绍了Antd中单个DatePicker限定时间输入范围操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
vue报错"vue-cli-service‘不是内部或外部命令,也不是...”的解决办法
这篇文章主要介绍了vue报错"vue-cli-service‘不是内部或外部命令，也不是...”的解决办法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-01
vue使用iframe嵌入网页的示例代码
本篇文章主要介绍了vue使用iframe嵌入网页的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
Vue中key的作用示例代码详解
key的特殊attribute主要用在Vue的虚拟DOM算法，在新旧Nodes对比时辨识VNodes。这篇文章主要给大家介绍Vue中key的作用，感兴趣的朋友跟随小编一起看看吧
2020-06-06
vue实现父子组件双向绑定的方法总结
Vue.js 是一种流行的 JavaScript 框架,它提供了一种简单且高效的方式来构建用户界面,在 Vue 中,父子组件之间的双向绑定是一种常见的需求,下面我们就来学习一下vue中父子组件双向绑定的常用方法吧
2023-10-10
Vue 使用中的小技巧
这篇文章主要介绍了Vue 使用中的小技巧,是小编日常开发的时候用到的小技巧，需要的朋友可以参考下
2018-04-04
Vuejs 实现简易 todoList 功能与组件实例代码
本文通过实例代码给大家介绍了Vuejs 实现简易 todoList 功能与组件，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-09-09
vue3使用canvas的详细指南
这篇文章主要给大家介绍了关于vue3使用canvas的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下
2023-04-04
vue3中使用jsx的实现步骤
本文主要介绍了vue3中使用jsx的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07