Vue+ElementUI+Axios实现全局接口请求的加载动画

Element-UI 提供了 Loading 组件,通过对于这个组件进行一些处理,我们能做到在使用Axios发送请求的时候进行 Loading 加载动画的控制。

一、定义Loaing.js

import { Loading } from 'element-ui';

let loading;
let loadingCount = 0;

const startLoading = () => {
  loading = Loading.service({
    lock: true,
    text: '加载中……',
    background: 'rgba(0, 0, 0, 0.7)'
  });
};

const endLoading = () => {
  loading.close();
};

export const showLoading = () => {
  if (loadingCount === 0) {
    startLoading();
  }

  loadingCount += 1;
};

export const hideLoading = () => {
  if (loadingCount <= 0) {
    return;
  }

  loadingCount -= 1;
  
  if (loadingCount === 0) {
    endLoading();
  }
};

二、axios请求配置Loaing.js

import Vue from 'vue'
import axios from 'axios'
import { showLoading, hideLoading } from './loading';

axios.interceptors.request.use(
  config => {
    showLoading();

    return config
  },
  err => {
    hideLoading();

    return Promise.reject(err)
  }
)

axios.interceptors.response.use(
  response => {
    hideLoading();

    return response;
  },
  error => {
    hideLoading();

    return error.response;
    //return Promise.reject(error.response.data)   // 返回接口返回的错误信息
  }
);
export default axios;

三、加载动画示例

在这里插入图片描述

相关推荐
<div style="color:#444444;"> 适用人群 <p style="color:#666666;"> 所有IT从业者,尤其适合快速掌握新技术,快速增长工作经验人群,对教育公平,教育公益,教育爱心公益人士 </p> </div> <p> <strong>提供完整课程源代码,前端 后端点击视频观看,在右侧【课件】中下载,所有代码都是线下班级运行很多次额,请放心购买。</strong> </p> 课程概述 <p> 该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue Admin Template+蚂蚁可视化AntV 等技术栈开发项目,采用分布式,多模块,前后端分离开发。包括图形展示、权限管理、用户管理等功能。<br /> 【后端技术】<br /> 技术 说明<br /> Spring Boot2 MVC框架 开发一站式解决方案<br /> Spring Security5  认证和授权框架<br /> MyBatisPlus3.3.1  基于 MyBatis 框架快速研发框架<br /> MyBatisCode工具 生成 MyBatis 相关代码<br /> Jackson 提供了处理 JSON 数据工具<br /> Lombok 简化对象封装工具 <br /> Druid   数据库连接池  </p> <p> <br /> 【前端技术】<br /> Vue        互联网最火前端框架<br /> Vue Router 路由框架<br /> Vuex 全局状态管理框架<br /> Axios 前端 HTTP 框架<br /> Element UI 前端 UI 框架<br /> Vue Element Admin 前端模板 </p> <p> Antv  蚂蚁金服可视化技术,阿里巴巴可视化技术,天猫,淘宝,支付宝,花呗均使用AntV </p> <p> <br /> </p> 【开发工具】<br /> IntelliJ IDEA 开发 IDE<br /> SQLyog 数据库连接客户端<br /> Postman HTTP 请求工具 <p> <br /> 【开发环境】<br /> 工具 版本<br /> JDK 1.8<br /> MySQL 5.7 </p> <p> <br /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/202004100908064292.png" alt="" /> </p> <p> <img src="https://img-bss.csdn.net/202004100901042498.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/202004100902149146.png" alt="" /> </p> <p> <img src="https://img-bss.csdn.net/202004100902305627.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/202004100903304413.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/202004100907393190.png" alt="" /><img src="https://img-bss.csdn.net/202004100907503620.png" alt="" /> </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页