利用axios的request 拦截器,response 拦截器实现加载层的效果

import Vue from ‘vue‘
import router from ‘../router‘
import axios from ‘axios‘
import { Indicator } from ‘mint-ui‘;
import { Toast } from ‘mint-ui‘;
axios.defaults.timeout = 30000;
axios.defaults.headers.common[‘Content-Type‘] = ‘application/json;charset=UTF-8‘
// http request 拦截器
axios.interceptors.request.use(
    config => {
      Indicator.open({
        text: ‘加载中...‘,
        spinnerType: ‘fading-circle‘
      });
      return config;

    },
    err => {
      Indicator.close();
      Toast({
        message: ‘加载超时‘,
        position: ‘middle‘,
        duration: 3000
      });
      return Promise.reject(err);
    });

// http response 拦截器
axios.interceptors.response.use(
    response => {
      let timetp = null;
      clearTimeout(timetp);
      timetp = setTimeout(()=>{
        Indicator.close();
        clearTimeout(timetp);
      },500)
      // Indicator.close();
      return response;
    },
    error => {
      if (error.response) {
        return Promise.reject(error)
    }
});
Vue.prototype.$ajax = axios;

原文地址:https://www.cnblogs.com/i-want-to-be-like-an-sun/p/9105722.html

时间: 2024-10-03 01:11:36

利用axios的request 拦截器,response 拦截器实现加载层的效果的相关文章

java中三个类别加载器的关系以及各自加载的类的范围

Java在需要使用类别的时候,才会将类别加载,Java的类别载入是由类别载入器(Class loader)来达到的,预设上,在程序启动之后,主要会有三个类别加载器:Bootstrap Loader.ExtClassLoader与AppClassLoader. Bootstrap Loader是由C++撰写而成,预设上它负责搜寻JRE所在目录的classes或lib目录下的.jar档案中(例如rt.jar)是否有指定的类别并加载(实际上是由系统参数sun.boot.class.path指定):预设

在dva框架和create-react-app创建出来的框架中修饰器语法与按需加载引入antd分别配置

按需加载需要的包  babel-plugin-import    装饰器语法需要的包  @babel/plugin-proposal-decorators dva框架 将.webpackrc  改成.webpackrc.js然后具体配置 const config = {}; config.proxy = { "/api": { "target": "http://localhost:7001", "changeOrigin":

不借助第三方插件利用ScrollView自身delegate实现下拉刷新和上拉加载

下拉刷新功能基本上在所有的app中都会被用到,而且这个功能已经被apple集成进去了,不过必须得是在tableViewController中才有,是一个叫做UIRefreshControl的控件,想看效果可以看手机QQ上面联系人列表下拉后的刷新.这里不多介绍. 本篇blog主要介绍如何在scrollview中实现下拉刷新的效果.因为有些时候我们可能更多地希望直接在scrollview中展现,而不是一定要局限于tableviewcontroller. 当然网上有很多下拉刷新和上拉加载的第三方控件,

0002 - Spring MVC 拦截器源码简析:拦截器加载与执行

1.概述 Spring MVC中的拦截器(Interceptor)类似于Servlet中的过滤器(Filter),它主要用于拦截用户请求并作相应的处理.例如通过拦截器可以进行权限验证.记录请求信息的日志.判断用户是否登录等. 2.简单示例 2.1.继承 HandlerInterceptorAdapter 抽象类实现一个拦截器.代码如下: public class DemoInterceptor extends HandlerInterceptorAdapter { @Override    pu

利用简洁的图片预加载组件提升h5移动页面的用户体验

在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http请求合并,缓存管理,图片压缩等方面做性能优化:另外就是可以对页面里用到的所有图片做预加载的处理,当用户打开页面的时候不立即显示第一屏,而是先显示资源加载效果,等到加载完毕,再来显示页面的主内容,这样就能解决那个问题.虽然这种加载效果占用了用户的浏览时间,但是我们可以把它做的好看有趣一点,所以也不会影

libgdx学习记录16——资源加载器AssetManager

AssetManager用于对游戏中的资源进行加载.当游戏中资源(图片.背景音乐等)较大时,加载时会需要较长时间,可能会阻塞渲染线程,使用AssetManager可以解决此类问题. 主要优点: 1. 大多数资源加载器AssetLoader都是异步加载,可以避免阻塞渲染线程. 2. 通过引用计数来进行释放资源. 3. 通过一个对象来管理所有其他资源. 主要函数: load(path,type)加载某个路径的资源文件,后面type指定所要加载的资源类型.这个函数只是将资源文件加入到资源队列中,并不会

AMD加载器实现笔记(一)

之前研究过AMD,也写过一篇关于AMD的文章<以代码爱好者角度来看AMD与CMD>.代码我是有看过的,基本的原理也都明白,但实际动手去实现却是没有的.因为今年计划的dojo教程<静静的dojo>中,有一章节来专门讲解AMD,不免要把对AMD的研究回炉一下.时隔多日,再回头探索AMD实现原理时,竟抓耳挠腮,苦苦思索不得要领.作为开发人员,深感惭愧.故有此文,记录我在实现一个AMD加载器时的思考总结. requireJS是所有AMD加载器中,最广为人知的一个.目前的版本更凝聚了几位大牛

vux loadmore + axios 实现点击加载更多

在微信项目中有应用过几个上拉加载更多的组件,但总会出现一些兼容性方面的bug,需要各种补漏(注:组件都是基于iscroll实现的, iscroll原本就有些坑).Vux也有提供Scroller组件实现上拉加载或下拉刷新,但官方已经不再维护该组件(未实际使用过,不知是否有坑).所以这次我们采用更为简单的方式来实现加载更多数据效果,废话不多说,直接看效果图. 实际效果图 实现思路 组件模板 <template> <div> <div v-for="(item,idx)

[源码]Python免杀ShellCode加载器(Cobaltstrike/Metasploit)

0x001 原理 采用分离法,即将ShellCode和加载器分离.方法较LOW但免杀. 本文主要将ShellCode转成HEX,再通过加载器执行ShellCode. PS: 何为SC加载器,即专门用于加载所提供ShellCode的工具. 如同HTTP发包工具,支持提交HTTP,写死参数最多只能叫EXP. 再详细点,打个比方,你只会炒一个菜,你敢说你是厨师吗? 0x002 ShellCode免杀 CS可生成很多种格式的ShellCode,具体该用哪一种呢? 由于部分杀软会查杀ShellCode文件