vue2实现数据请求显示loading图
时间:2019-04-10
本文章向大家介绍vue2实现数据请求显示loading图,主要包括vue2实现数据请求显示loading图使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一般项目中,有时候会要求,你在数据请求的时候显示一张gif图片,然后数据加载完后,消失。这个,一般只需要在封装的axios中写入js事件即可。当然,我们首先需要在app.vue中,加入此图片。如下:
<template> <div id="app"> <loading v-show="fetchLoading"></loading> <router-view></router-view> </div> </template> <script> import { mapGetters } from 'vuex'; import Loading from './components/common/loading'; export default { name: 'app', data() { return { } }, computed: { ...mapGetters([ 'fetchLoading', ]), }, components: { Loading, } } </script> <style> #app{ width: 100%; height: 100%; } </style>
这里的fetchLoading是存在vuex里面的一个变量。在store/modules/common.js里需要如下定义:
/* 此js文件用于存储公用的vuex状态 */ import api from './../../fetch/api' import * as types from './../types.js' const state = { // 请求数据时加载状态loading fetchLoading: false } const getters = { // 请求数据时加载状态 fetchLoading: state => state.fetchLoading } const actions = { // 请求数据时状态loading FETCH_LOADING({ commit }, res) { commit(types.FETCH_LOADING, res) }, } const mutations = { // 请求数据时loading [types.FETCH_LOADING] (state, res) { state.fetchLoading = res } }
loading组件如下:
<template> <div class="loading"> <img src="./../../assets/main/running.gif" alt=""> </div> </template> <script> export default { name: 'loading', data () { return {} }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .loading{ position: fixed; top:0; left:0; z-index:121; width: 100%; height: 100%; background: rgba(0,0,0,0.3); display: table-cell; vertical-align: middle; text-align: center; } .loading img{ margin:5rem auto; } </style>
最后在fetch/api.js里封装的axios里写入判断loading事件即可:如下
// axios的请求时间 let axiosDate = new Date() export function fetch (url, params) { return new Promise((resolve, reject) => { axios.post(url, params) .then(response => { // 关闭 loading图片消失 let oDate = new Date() let time = oDate.getTime() - axiosDate.getTime() if (time < 500) time = 500 setTimeout(() => { store.dispatch('FETCH_LOADING', false) }, time) resolve(response.data) }) .catch((error) => { // 关闭 loading图片消失 store.dispatch('FETCH_LOADING', false) axiosDate = new Date() reject(error) }) }) } export default { // 组件中公共页面请求函数 commonApi (url, params) { if(stringQuery(window.location.href)) { store.dispatch('FETCH_LOADING', true); } axiosDate = new Date(); return fetch(url, params); } }
这样就实现了,项目中当加载数据的时候,显示gif图片,当数据加载出来时消失。
关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Android 仿京东、拼多多商品分类页
- 简单高效的实现 Android App 全局字体替换
- 基于 RxJava2+Retrofit2 精心打造的 Android 基础框架 XSnow
- Android 图片选择到裁剪之步步深坑
- Android自定义 View 实战之 StickerView
- 十分钟搞定酷炫动画,Android自定义 View 入门
- 基础篇章:关于 React Native 之 Switch 和 ProgressBarAndroid 组件的讲解
- Android 实现视屏播放器、边播边缓存功能、外加铲屎(IJKPlayer)
- 基础篇章:关于 React Native 之 ToolbarAndroid 组件的讲解
- Android M 权限最佳实践
- Android自定义ViewGroup神器-ViewDragHelper
- Android 中常见的内存泄漏
- Android 高级自定义Toast及源码解析
- 环境配置:React Native 开发环境配置 For Android
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Django DeleteView without confirmation template, but with CSRF attack
- 小记 TypeScript 中的循环引用问题
- 别只会搜日志了,求你懂点检索原理吧
- 分布式系统中的事务问题
- JDK 中的栈竟然是这样实现的?
- 谈一谈如何在Python开发中拒绝SSRF漏洞
- eval长度限制绕过 && PHP5.6新特性
- Cookie-Form型CSRF防御机制的不足与反思
- Python 格式化字符串漏洞(Django为例)
- unity官方案例精讲(第三章)--星际航行游戏Space Shooter
- Pwnhub Web题Classroom题解与分析
- WTForm的URLXSS谈开源组件的安全性
- 谈一谈复杂的正则表达式分析
- Linux 用户名、主机添加背景色
- percona-toolkit大表操作DDL使用 2.1. 数据库字符集修改2.2. 数据库建库、授权操作2.3. 数据库建表、插入数据4.1. 添加表字段【