时间:2021-05-26
本文实例讲述了vuex+axios+element-ui实现页面请求loading操作。分享给大家供大家参考,具体如下:
我们在平常写项目的时候,发请求的时候肯定会习惯用一个 loading 遮罩层来防止用户在没拿到数据之前误操作
如果是页面同时只发送一个请求,那么无论是在组件中或者是在 axios 插件中进行请求和响应拦截都可以做到
但是,当一个页面同时要发送多个请求的时候,这么做显然就不行了
因为最先完成的请求会把所有请求的 loading 都给关闭
举个例子,第一个请求的响应时间为 3s ,第二个请求的响应时间为 1s ,两个同时请求的时候,loading 会开始
但是当 1s 后第二个请求完成后,会直接关闭 loading,但是此时第一个请求还没完成,所有这样肯定是不行的
今天就用这篇文章来介绍下我在项目中是怎么应对这种情况的
其实这个思路很简单,就是通过 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邮箱联系删除。
axios.jsimportaxiosfrom'axios';importQsfrom'qs';import{Message}from'element-ui';
第一步、cdn引入各种包index.html中cdn的方式引入vue、vuex、axios、element-ui、vue-router等包,如下图:第二步、在使
本文介绍了webpack+vuex+axios跨域请求数据的示例代码,分享给大家,具体如下:使用vue-li构建webpack项目,修改bulid/config
新增JS页面axiosExport.JS//Axios拦截请求并实现下载importaxiosfrom'axios'//downloadurlexportcon
本文实例为大家分享了vue+element-ui+axios实现图片上传的具体代码,供大家参考,具体内容如下Examples选择图片newVue({el:'#a