蝙蝠岛资源网 Design By www.hbtsch.com

本文实例讲述了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 "加载中...",
   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,axios,element-ui,页面请求,loading

蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

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

暂无vuex+axios+element-ui实现页面请求loading操作示例的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?