element-ui全局添加loading效果

前言

在我们的平时的工作中，在前后端交互的时候，为了提高页面的观赏性和用户的体验，我们会在页面上添加loading来阻止用户操作来等待接口的返回，这个时候我们会考虑到全局loading还是局部loading。

需要用到的第三方插件

$ npm i element-ui -S
$ npm i lodash -S
$ npm i axios -S

首先我们需要引入element-ui的Loading组件，这个组件有两种调用方式：

1、通过指v-loading

2、通过服务Loading.service();

我们一般是在请求和响应拦截器中添加loading效果，完整代码如下：

首先基于element-ui进行loading二次封装组件

import { Loading } from "element-ui";
import _ from 'lodash';

let loading = null;
let needRequestCount = 0;


//开启loading状态
const startLoading = (headers={}) => {
  loading = Loading.service({
    lock: true,   //是否锁定屏幕的滚动
    text: headers.text||"加载中……",  //loading下面的文字
    background: "rgba(0, 0, 0, 0.7)",  //loading的背景色
    target:headers.target||"body"      //loading显示在容器
  });
};

//关闭loading状态
//在关闭loading为了防止loading的闪动，采用防抖的方法，防抖计时一般采用300-600ms
//在关闭loading之后，我们需注意全局变量导致的V8垃圾回收机制，把没用的变量清空为null
const endLoading = _.debounce(() => {
  loading.close();
  loading = null;
},300);


export const showScreenLoading=(headers)=>{
   if(needRequestCount == 0&&!loading){
    startLoading(headers);
   }
   needRequestCount++;
}

export const hideScreenLoading=()=>{
    if(needRequestCount<=0)  return 
    needRequestCount--;
    needRequestCount = Math.max(needRequestCount, 0);
    if(needRequestCount===0){
        endLoading()
    }
}
export default {};

将上面封装的组件引入到utils->request文件中

import axios from "axios";
import Lockr from "lockr";
import { showScreenLoading, hideScreenLoading } from "./loading";
import { Message } from "element-ui";

class Service {
  construct() {
    this.baseURL = process.env.VUE_APP_URL;
    this.timeout = 3000; //请求时间
  }
  request(config) {
    let instance = axios.create({
      baseURL: this.baseURL,
      timeout: this.timeout
    });
    //请求拦截器
    instance.interceptors.request.use(
      config => {
        config.headers.Authorization = Lockr.get("token");
        if (config.headers.showLoading !== false) {
          showScreenLoading(config.headers);
        }
        return config;
      },
      error => {
        if (config.headers.showLoading !== false) {
          hideScreenLoading(config.headers);
        }
        Message.error("请求超时!");
        return Promise.reject(error);
      }
    );
    //响应拦截器
    instance.interceptors.response.use(
      response => {
        if (response.status == 200) {
          setTimeout(() => {
            if (response.config.headers.showLoading !== false) {
              hideScreenLoading();
            }
          }, 500);
          return response.data;
        }
      },
      error => {
        if (response.config.headers.showLoading !== false) {
          hideScreenLoading();
        }
        return Promise.reject(error);
      }
    );
    return instance(config);
  }
}

export default new Service();