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

时间:2021-05-26

本文实例讲述了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 = { startLoading(state, msg) { state.loadingInstance = Loading.service({ lock: true, text: msg ? msg : "加载中...", background: "rgba(0, 0, 0, 0.7)" }); }, 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程序设计有所帮助。

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章