vuex+axios+element-ui实现页面请求loading操作示例
2020-02-13 11:30
841 查看
本文实例讲述了vuex+axios+element-ui实现页面请求loading操作。分享给大家供大家参考,具体如下:
前言
我们在平常写项目的时候,发请求的时候肯定会习惯用一个 loading 遮罩层来防止用户在没拿到数据之前误操作
如果是页面同时只发送一个请求,那么无论是在组件中或者是在 axios 插件中进行请求和响应拦截都可以做到
但是,当一个页面同时要发送多个请求的时候,这么做显然就不行了
因为最先完成的请求会把所有请求的 loading 都给关闭
举个例子,第一个请求的响应时间为 3s ,第二个请求的响应时间为 1s ,两个同时请求的时候,loading 会开始
但是当 1s 后第二个请求完成后,会直接关闭 loading,但是此时第一个请求还没完成,所有这样肯定是不行的
今天就用这篇文章来介绍下我在项目中是怎么应对这种情况的
一、用到的东西
- element-ui 的 loading
- vuex 的状态管理
- 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程序设计有所帮助。
您可能感兴趣的文章:
- Vuex的API文档说明详解
- Vuex模块化应用实践示例
- 浅谈vuex为什么不建议在action中修改state
- 一看就会的vuex实现登录验证(附案例)
- Vue-CLI与Vuex使用方法实例分析
- Vuex实现数据共享的方法
- 使用vuex较为优雅的实现一个购物车功能的示例代码
- VUEX-action可以修改state吗
- vue-router结合vuex实现用户权限控制功能
- 解决vuex数据异步造成初始化的时候没值报错问题
- VUEX 数据持久化,刷新后重新获取的例子
- 实现vuex与组件data之间的数据同步更新方式
- vuex管理状态 刷新页面保持不被清空的解决方案
- vuex实现数据状态持久化
- vuex存储token示例
- Vuex实现数据增加和删除功能
- VUE:vuex 用户登录信息的数据写入与获取方式
- Vue的状态管理vuex使用方法详解
相关文章推荐
- vue+axios+element ui 实现全局loading加载示例
- vue+axios+element-ui 实现ajax请求拦截和路由拦截
- Vue + Vue-router + Element-ui+axios 实现研究生管理系统中的“考试档期”(前端+后端数据)
- Vue + Element UI 实现权限管理系统 前端篇(十三):页面权限控制
- Vue + Vue-router + Element-ui+axios 实现研究生管理系统中的“学生类型”(前端+后端数据)
- 详解Vue、element-ui、axios实现省市区三级联动
- [置顶] 用Vue、element-ui、axios实现省市区三级联动
- springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)
- 基于VUE+Element UI的子页面和父页面交互示例
- axios+vue+element-ui以服务端方式动态加载loading
- vue+axios+element-ui实战(二)--axios请求封装
- vue-element-UI中实现翻页改变索引index,修改页面显示item数量的方法
- Vue + Vue-router + Element-ui 实现研究生管理系统中的“学生类型”页面功能实现
- vue+element-ui+axios实现图片上传
- vuedraggable+element ui实现页面控件拖拽排序效果
- 用Vue、element-ui、axios实现省市区三级联动
- Vue+element-ui 实现表格的分页功能示例
- 实现axios的统一封装API,axios结果格式处理,vue组件的loading动画变量在axios请求的前后改变
- vue+element UI实现树形表格带复选框的示例代码
- vue+ElementUI+后台接口实现登录页面