全国咨询热线:18720358503

微信打分小程序_vuex+axios+element

类别:媒体报道 发布时间:2021-01-06 浏览人次:

vuex+axios+element-ui实现页面请求loading操作示例       这篇文章主要介绍了vuex+axios+element-ui实现页面请求loading操作,结合实例形式分析了vuex+axios+element-ui实现页面请求过程中loading遮罩层相关操作技巧与使用注意事项,需要的朋友可以参考下

本文实例讲述了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++;
 mit("startLoading");
 } else {
 state.apiCount--;
 if (state.apiCount = 0) {
 mit("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 = {
 mit("updateApiCount", "add");
 return config;
 error = {
 mit("updateApiCount", "sub");
 Promise.reject(error);
service.interceptors.response.use(
 response = {
 mit("updateApiCount", "sub");
 return response.data;
 error = {
 mit("updateApiCount", "sub");
 return Promise.reject(error);
export default service;

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

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


推荐阅读

微信打分小程序_vuex+axios+element

vuex+axios+element-ui完成网页页面恳求loading实际操作实例 本文关键详细介绍了vuex+axios+element-ui完成网页页面恳求loading实际操作,融合案例方式剖析了vuex+axios+element-ui完成网页页面恳求...

2021-01-06
手机网站建设怎么做优化

  重庆市手机上企业网站建设要不要提升,怎样做提升,现阶段还没有有完善的方法,并且大多数数的手机上网站全是二级网站域名存有的,关键還是以PC端主导。可是...

2021-01-06
贝尔利科技解析为什么网站内容难以被查找引擎

许多网站站长在刚运营自身的网站的情况下,常常碰到百度收录难的难题。有的情况下一个月也没有被百度收录,急得焦头烂额可是依然沒有方法,一直受困惑了好长时间。每日都会想...

2021-01-06
付款宝发力小程序流程_js完成单元格拖拽效果

js完成模块格拖动实际效果 本文关键为大伙儿详尽详细介绍了js完成模块格拖动实际效果,原文中实例编码详细介绍的十分详尽,具备一定的参照使用价值,很感兴趣的小伙子伴们...

2021-01-06
小程序页面设计_微信小程序调用后台service教程详

手机微信微信小程序启用后台管理service实例教程详细说明 文章投稿:yaominghui 本文关键详细介绍了手机微信微信小程序启用后台管理service实例教程详细说明,原文中根据实例编码详...

2021-01-06
栖霞企业网站建设-app制作

商品以栩栩如生的文本照片和电影展现胜于传统式的宣传策划小册子更清楚栩栩如生并且商品归类准确、便捷、便捷、易明更可联接大量的材料客户能够运用APP里边的探讨区发布建议,...

2021-01-06
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信