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

朱雀 2022-11-12 02:57 239阅读 0赞

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;

## 三、加载动画示例 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MjI5NTY3_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MjI5NTY3_size_16_color_FFFFFF_t_70]: /images/20221022/353581366b204d8d82016dbd9a08a654.png