axios构建请求池处理全局loading状态&&axios避免重复请求

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

很多时候我们能够看到类似进度条一样的东西在页面顶部进行加载，代表页面是否加载完成，或者其他的loading效果，我们当然不可能通过promise.all来讲所有的请求合并到一起然后进行处理，这个时候我们可以通过一个计数器，然后监听axios的请求发送来进行处理

//定义计时器
let loadCount = 0;// 请求前
http.interceptors.request.use(
config => {
loadCount++;
// LoadingBar.start()
// loading加载
return config
},
err => {
return Promise.reject(err)
}
)
//请求后
http.interceptors.response.use(
res => {
loadCount--
if (!loadCount) {
//LoadingBar.end();
//结束loading
}
return res;
},
err => {
loadCount--;
if (!loadCount) {
//LoadingBar.end();
//结束loading
}
return Promise.reject(err);
}
)

在一些特殊的需求里面，我们可能会重复的进行请求，比如即时搜索，虽然有时候可以通过节流的方式处理一下，但是难免会遇到第一次请求比第二次请求晚返回的情况，导致呈现的数据不准确，所以我们可以通过中断请求来防止此类情况发生

// 请求前
http.interceptors.request.use(
config => {
if(config.cancelToken && config.cancelObj && config.cancelObj.cancel) {
config.cancelObj.cancel('中断请求');
delete config.cancelObj;
}
return config;
},
err => {
return Promise.reject(err)
}
);//使用
//工厂方法创建CancelToken
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token,
cancelObj: source
}).catch(function(err) {
if (axios.isCancel(err)) {
console.log('Request canceled', thrown.message);
} else {
// 处理错误
}
});

axios构建请求池处理全局loading状态&&axios避免重复请求的更多相关文章

AXIOS构建请求处理全局loading状态&amp&semi;&amp&semi;AXIOS避免重复请求loading多次出现
一般情况下,在 vue 中结合 axios 的拦截器控制 loading 展示和关闭,是这样的:在 App.vue 配置一个全局 loading. <div class="app&qu ...
axios构建缓存池存储基础数据
项目中经常出现需要多次使用的后端数据,通常的做法是通过变量缓存数据,或者通过类似vuex的东西来进行缓存,但是麻烦在于很可能需要判断一大堆的条件,或者说如果有权限控制的时候数据能否读取也是很麻烦的事情 ...
前端通信：ajax设计方案（八）--- 设计请求池，复用请求，让前端通信快、更快、再快一点
直接进入主题,本篇文章有点长,包括从设计阶段,到摸索阶段,再到实现阶段,最后全面覆盖测试阶段(包括数据搜集清洗),还有与主流前端通信框架进行对比PK阶段. 首先介绍一下一些概念: 1. 浏览器的并发能 ...
DVA框架统一处理所有页面的loading状态
dva 有一个管理 effects 执行的 hook,并基于此封装了 dva-loading 插件.通过这个插件,我们可以不必一遍遍地写 showLoading 和 hideLoading,当发起请求 ...
ASP&period;NET WebApi服务接口如何防止重复请求实现HTTP幂等性
一.背景描述与课程介绍明人不说暗话,跟着阿笨一起玩WebApi.在我们平时开发项目中可能会出现下面这些情况; 1).由于用户误操作,多次点击网页表单提交按钮.由于网速等原因造成页面卡顿,用户重复刷新 ...
layui之初始化加分页重复请求问题解决
layui框架中的page困扰我很久,一个页面初始化后并且分页,导致初始化渲染请求一次,分页再请求了一次,一个接口就重复请求了2次,通过不停的分析和测试,最终解决了这个问题. 基于JQ的ajax二次封 ...
vue axios拦截器 + 自编写插件实现全局 loading 效果；
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
小程序api请求层封装（Loading全局配置）
前言小程序开发,没有vue中的axios那么好使,请求层的封装需要自己来搞. 当然请求层的配置少不了loading,这里索性也就将loading做一个配置,避免以后重复造轮子请求封装小程序中有封 ...
vue-cli的项目中关于axios的全局配置,结合element UI,配置全局loading，header中做token传输
在src目录中建立plugins文件夹,在文件夹内建立axios.js文件 "use strict"; import Vue from 'vue'; import axios fr ...

随机推荐

【干货分享】流程DEMO-资产请购单
流程名: 资产请购业务描述: 流程发起时,会检查预算,如果预算不够,流程必须经过总裁审批,如果预算够用,将发起流程,同时占用相应金额的预算,但撤销流程会释放相应金额的预算. 流程相关文件: 流程 ...
原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
c&num; List去重
1 list如果数据是值类型,比如list<int> 这种,添加linq之后就可以使用list = list.Distinct().ToList(); 2 如果是数据是引用类型,比如中间是 ...
AOP动态代理解析3-增强方法的获取
对于指定bean的增强方法的获取一定是包含两个步骤的: 获取所有的增强寻找所有增强中使用于bean的增强并应用那么findCandidateAdvisors与findAdvisorsThatCan ...
MySQL如何关联查询
总的来说,mysql认为任何一个查询都是一次关联,并不仅仅是一个查询需要用到两个表匹配才叫关联,所以,在mysql中,每一个查询,每一个片段(包括子查询,甚至单表select)都可能是关联.所以,理解 ...
python子类分配
原问题是将左边样式变成右边样式: 即有父类和子类,父类包括多个子类,怎样将子类匹配到父类下面的问题代码如下 #!/usr/bin/python3.4 # -*- coding: utf-8 -*- ...
sqlilabs 5
第一个1不断返回true,2可以进行更改?id=-1' union select 1,2,3 and '1?id=-1' union select 1,2,3 and 1='1 ?id=-1' uni ...
[LeetCode] Insert into a Cyclic Sorted List 在循环有序的链表中插入结点
Given a node from a cyclic linked list which is sorted in ascending order, write a function to inser ...
Python中字符串的操作
字符串的基本详情用单引号或者双引号包含的内容不支持直接在内存中修改可支持索引.切片.成员检查.长度查看字符串赋值到变量 str1 = 'hello world' 字符串打印查看 str1 = ...
sqlite处理数据
# coding: UTF-8 import platform from _utils.patrol2 import run_cmd, data_format, report_format impor ...