项目需求:用自定义的 .gif 图标实现全局 loading 效果;为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件;下面直接贴上代码~

在公用模块定义loading文件,含 index.js,loading.vue文件,文件结构如下:

注:loading.vue 与 index.js 之间的传值通过props实现,代码如下:

loading.vue

<template>
  <div class="load-model" v-show="showLoading">
    <img src="../images/loading.gif" alt="loading...">
  </div>
</template>

<script>
export default {
  data(){
    return {

    }
  },
  props:{
    showLoading:false
  }
}
</script>

<style scoped>
.load-model{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /*background:rgba(255,255,255,0.8);*/
   /* background:rgba(0,0,0,0.6); */
}
.load-model > img{
  width: 12rem;
  height: 12rem;
  margin-top: -5rem;
}
</style>

index.js

let loadTemp = require('./loading.vue').default; // cli3.0以后引入vue模板需要default

let Load = {}; // 定义插件对象
Load.install = (Vue,options) => { // Vue的install方法,用于定义vue插件
  // 如果存在loading 不重复创建DOM
  if(document.getElementsByClassName('.load-model').length) return;

  let lTemp = Vue.extend(loadTemp);

  // 实例化VUE实例
  let $vm = new lTemp();

  // 此处使用$mount来手动开启编译,用$el来访问元素,并插入到body中
  let tpl = $vm.$mount().$el;
  document.body.appendChild(tpl);

  Vue.prototype.$loading = { // 在Vue的原型上添加实例方法,以全局调用
    show(options){
      if(options == "loading"){
        $vm.showLoading = true;
      }
    },
    hide(){
      $vm.showLoading = false;
    }
  }
}

// 导出Load
export default Load;

插件写完后在main.js 中全局调用:

import Loading from './common/loading'

Vue.use(Loading)

这样的话我们就可以在所需要调用的页面调用如下方法:

this.$loading.show("loading"); // 触发 loading 事件
this.$loading.hide(); // 关闭 loading 事件

这样的添加只适用于项目小然后页面比较少的情况下,在大项目下或页面较多的情况下,这样维护起来很繁琐且麻烦,由此我们借用 axios 拦截器,保证统一在一个地方触发与关闭,如下为 axios 拦截器的代码:

开启 loading 效果的代码为:Vue.prototype.$loading.show("loading");

关闭 loading 效果的代码为:Vue.prototype.$loading.hide();

axios_api.js

import Vue from 'vue';
import axios from 'axios';//更改http请求插件
import {Indicator, Toast} from 'mint-ui';

let toast = function (text) {
  Toast({
    message: text,
    duration: 2000
  })
};

// 设置全局的请求次数,请求的间隙
axios.defaults.retry = 1;
axios.defaults.retryDelay = 500;

axios.interceptors.request.use(config => {
  Vue.prototype.$loading.show("loading");
  config.timeout = 60000;
  config.headers['Content-Type'] = 'application/json;charset=utf-8';
  return config
}, error => {
  return Promise.reject(error)
});
axios.interceptors.response.use(response => {
  if (response.status == 200) {
    setTimeout(() => {
      Vue.prototype.$loading.hide();
    },500);
  } else {
    setTimeout(() => {
      Vue.prototype.$loading.hide();
    },500);
    toast('获取数据失败');
  }
  return response;
}, error => {
  // var config = error.config;
  // if (!config || !config.retry) return Promise.reject(error);
  // config.__retryCount = config.__retryCount || 0;
  // if (config.__retryCount >= config.retry) {
  setTimeout(() => {
    Vue.prototype.$loading.hide();
  },500);
  if (error.response) {
    switch (error.response.status) {
      case 0:
        toast('网络连接超时');
        break;
      case 404:
        toast('您请求的功能不存在');
        break;
      case 408:
        toast('请求超时');
        break;
      default:
        toast('请求失败');
        break;
    }
    return Promise.reject(error.response.data);
  } else {
    if (!axios.isCancel(error)) {
      toast('网络连接超时');
    }
    return Promise.reject(error);
  }
  // }
  // config.__retryCount += 1;
  // var backoff = new Promise(function (resolve) {
  //   setTimeout(function () {
  //     resolve();
  //   }, config.retryDelay || 1);
  // });
  // return backoff.then(function () {
  //   return axios(config);
  // });
});

export default axios;

vue axios拦截器 + 自编写插件 实现全局 loading 效果;的更多相关文章

  1. vue --- axios拦截器+form格式请求体

    在vue2.x中使用CLI生成的模板有很大改变,需要自己手动在main.ts同级目录下新建interceptors.ts interceptors.ts import axios from 'axio ...

  2. vue axios 拦截器

    前言 项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断. 第一次使用拦截器,文章中如有不对的地方还请各位大佬帮忙指正谢谢. 正文 axios的拦截器分为 ...

  3. vue axios拦截器的封装

    // request.js import axios from 'axios' import qs from 'qs' // 创建axios实例 const service = axios.creat ...

  4. vue axios拦截器介绍

    关于axios的拦截器是一个作用非常大,非常好用的东西.分为请求拦截器和响应拦截器两种.我一般把拦截器写在main.js里. 1. 请求拦截器 请求拦截器的作用是在请求发送前进行一些操作,例如在每个请 ...

  5. vue axios拦截器加全局loading

    import axios from 'axios' import util from './util' import {showFullScreenLoading, tryHideFullScreen ...

  6. Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

    准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...

  7. vue导航守卫和axios拦截器的区别

    在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时 ...

  8. Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

    1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...

  9. 12. 前后端联调 + ( proxy代理 ) + ( axios拦截器 ) + ( css Modules模块化方案 ) + ( css-loader ) + ( 非路由组件如何使用history ) + ( bodyParser,cookieParser中间件 ) + ( utility MD5加密库 ) + ( nodemon自动重启node ) + +

    (1) proxy 前端的端口在:localhost:3000后端的端口在:localhost:1234所以要在webpack中配置proxy选项 (proxy是代理的意思) 在package.jso ...

随机推荐

  1. 关于asyncio知识(二)

    一.asyncio之—-入门初探 通过上一篇关于asyncio的整体介绍,看过之后基本对asyncio就有一个基本认识,如果是感兴趣的小伙伴相信也会尝试写一些小代码尝试用了,那么这篇文章会通过一个简单 ...

  2. james2.3 配置收件 之 MariaDB数据库配置

    james我们公司一直都是使用的2.3这个稳定版本,现在已经有3.0了,不过无所谓,能用就行 基于2.3,来进行一些配置,主要是接受邮件,之前的博文如何安装的,这里不多做介绍了,链接参考:https: ...

  3. iOS中UITextField输入判断小数点后两位

    在输入金额的UITextField中,要给予三个规则的判断 1. 只能输入数字(可以通过设置键盘类型为Decimal Pad) 2. 小数点只能有一个 3. 小数点后最多有两位数字 (可以通过正则表达 ...

  4. 每天学点Linux-切割命令split

    一种常见的需求是,有一个比较大的文件,需要把它切割成比较小的几个文件,在Linux系统中你就可以使用Split命令了.Split命令可以将一个大的文件按照文件大小或者行数切割成小文件.Split命令的 ...

  5. 框架源码系列八:Spring源码学习之Spring核心工作原理(很重要)

    目录:一.搞清楚ApplicationContext实例化Bean的过程二.搞清楚这个过程中涉及的核心类三.搞清楚IOC容器提供的扩展点有哪些,学会扩展四.学会IOC容器这里使用的设计模式五.搞清楚不 ...

  6. python一个简单的websocket测试客户端

    朋友发的,之前在网上一直没找着,先记着 #!/usr/bin/env python import asyncio import websockets import json async def tes ...

  7. python sort和sorted区别。

    前者是方法,后者是函数.oop和opp区别的经典体现.好好领会,就能知道什么时候写类什么时候写函数好.

  8. 24访问者模式Visitor

    一.什么是访问者模式 Visitor模式也叫访问者模式,是行为模式之一 ,它分离对象的数据和行为,使用Visitor模式, 可以不修改已有类的情况下,增加新的操作. 二.访问者模式的应用示例 比如有一 ...

  9. HttpServletResponse实现文件下载

    import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; import ...

  10. puppet(4)-类、模版语言、模块

    puppet(4)-类.模版语言.模块 代码重用: class, module 类 类的简单说明 类是用于公共目的的一组资源,是命名的代码块,创建后可在puppet全局进行调用,类可以继承类是我们构建 ...