vuex+axios+element-ui实现页面请求loading操作示例


Posted in Javascript onFebruary 02, 2020

本文实例讲述了vuex+axios+element-ui实现页面请求loading操作。分享给大家供大家参考,具体如下:

前言

我们在平常写项目的时候,发请求的时候肯定会习惯用一个 loading 遮罩层来防止用户在没拿到数据之前误操作

如果是页面同时只发送一个请求,那么无论是在组件中或者是在 axios 插件中进行请求和响应拦截都可以做到

但是,当一个页面同时要发送多个请求的时候,这么做显然就不行了

因为最先完成的请求会把所有请求的 loading 都给关闭

举个例子,第一个请求的响应时间为 3s ,第二个请求的响应时间为 1s ,两个同时请求的时候,loading 会开始

但是当 1s 后第二个请求完成后,会直接关闭 loading,但是此时第一个请求还没完成,所有这样肯定是不行的

今天就用这篇文章来介绍下我在项目中是怎么应对这种情况的

一、用到的东西

  1. element-ui 的 loading
  2. vuex 的状态管理
  3. axios 的请求拦截和响应拦截

二、实现

其实这个思路很简单,就是通过 vuex 来管理请求的个数,假如用 apiCount 这个变量来代表请求的个数,每次请求的时候打开 loading 并且 apiCount  加一,每次响应完成或者失败的时候都让 apiCount 减一,并且检测 apiCount 变量的值,当为 apiCount=0 的时候,就关闭 loading 就可以了,代码如下:

store.js 代码(用来管理 vuex)

import Vue from "vue";
import Vuex from "vuex";
import { Loading } from "element-ui";
Vue.use(Vuex);
const state = {
 //请求计数
 apiCount: 0,
 //loading实例
 loadingInstance: null,
};
const mutations = {
 /* 打开Loading */
 startLoading(state, msg) {
  state.loadingInstance = Loading.service({
   lock: true,
   text: msg ? msg : "加载中...",
   background: "rgba(0, 0, 0, 0.7)"
  });
 },
 /* 关闭loading */
 closeLoading(state) {
  state.loadingInstance.close();
 },
 /* 更新请求线程池 */
 updateApiCount(state, handle) {
  if (handle == "add") {
   state.apiCount++;
   this.commit("startLoading");
  } else {
   state.apiCount--;
   if (state.apiCount <= 0) {
    this.commit("closeLoading");
   }
  }
 }
};
const store = new Vuex.Store({
 state,
 mutations
});
export default store;

request.js 代码(封装 axios 的文件)

import axios from "axios";
import { Message } from "element-ui";
import store from "../store/index";
import router from "../router/index";
const service = axios.create({
 baseURL: process.env.VUE_APP_BASE_URL,
 timeout: 0
});
service.interceptors.request.use(
 config => {
  store.commit("updateApiCount", "add");
  return config;
 },
 error => {
  store.commit("updateApiCount", "sub");
  Promise.reject(error);
 }
);
service.interceptors.response.use(
 response => {
  store.commit("updateApiCount", "sub");
  return response.data;
 },
 error => {
  store.commit("updateApiCount", "sub");
  return Promise.reject(error);
 }
);
export default service;

好了,这样就做到了请求的时候自动打开 loading,所有的请求结束才会关闭 loading 了,无论同时多少个请求都可以

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
javascript 禁止复制网页
Jun 11 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
JavaScript对Json的增删改属性详解
Jun 02 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
为输入框加入数字js校验代码分享
Nov 02 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 #Javascript
node 版本切换的实现
Feb 02 #Javascript
vue路由缓存的几种实现方式小结
Feb 02 #Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 #Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 #Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 #jQuery
基于node+vue实现简单的WebSocket聊天功能
Feb 01 #Javascript
You might like
掌握PHP垃圾回收机制详解
2019/03/13 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
js Date概念详细介绍
2013/11/22 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
从Python的源码来解析Python下的freeblock
2015/05/11 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
学生会竞聘书范文
2014/03/31 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
学校读书活动总结
2014/06/30 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
交通事故协议书范本
2014/11/18 职场文书
2014年检验科工作总结
2014/11/22 职场文书
2014年医务科工作总结
2014/12/18 职场文书
闪闪的红星观后感
2015/06/08 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记