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中面向对象技术的模拟
Sep 25 Javascript
jquery validator 插件增加日期比较方法
Feb 21 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
9个JavaScript日常开发小技巧
Oct 06 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
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&amp;java(三)
2006/10/09 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
TBCompressor js代码压缩
2011/01/05 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
js登录弹出层特效
2014/03/07 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
jqTransform美化表单
2015/10/10 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
python if not in 多条件判断代码
2016/09/21 Python
Python装饰器用法实例总结
2018/02/07 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
canvas线条的属性详解
2018/03/27 HTML / CSS
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
财务管理专业毕业生求职信范文
2013/09/21 职场文书
优秀员工年终发言演讲稿
2014/01/01 职场文书
品德评语大全
2014/05/05 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
《称赞》教学反思
2016/02/17 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL