首页 ›  文章

vue项目中全局loading的实现(结合element-ui)

2019-12-02

在项目目录中新建文件, 命名为axios.js, 复制以下代码, 其原理为在axios的请求和响应拦截中判断请求是否结束.


import vue from 'vue';
import axios from 'axios';
import { Loading } from 'element-ui'
// 定义请求次数(用于判断请求是否已经全部响应)
let requestCount = 0;
let loading;
// (客户端请求前)显示loading
function showLoading() {
  if (requestCount === 0) {
    loading = Loading.service({
      spinner: "mobile-loading",    //loading样式类名
      background: "rgba(0,0,0,0.8)"
    })
  }
  requestCount++
}
let timer;
// (服务器响应后)尝试隐藏loading
function tryHideLoading() {
  requestCount-- 
  //采用setTimeout是为了解决一个请求结束后紧接着有另一请求发起导致loading闪烁的问题
  timer = setTimeout(() => {    
    if (requestCount === 0) {
      loading.close()
      clearTimeout(timer)
    }
  })
}

let newAxios = axios.create({
  baseURL: "此处可设置项目的公共请求地址",
});

// 添加请求拦截器
axios.interceptors.request.use(function (config) {    
    showLoading()
    return config;
  }, function (error) {
    return Promise.reject(error);
  });
// 添加响应拦截器
axios.interceptors.response.use(function (response) {    
    tryHideLoading()
    return response;
  }, function (error) {
    return Promise.reject(error);
  });

const mixinObj = {
  data() {
    return {
      axios: newAxios,
    }
  }
};

// main.js文件中引入该文件之后, 可在*.vue文件中通过this.axiso.*直接发起请求
vue.mixin(mixinObj);

// 将处理后的axios示例暴露, 可以在*.vue文件中正常引入后使用
export default newAxios;
原文链接:segmentfault.com

上一篇:nginx下部署vue项目的缓存策略
下一篇:JavaScript 双向链表_048
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入