Vue2 implements data request display loading graph, and vue2 implements loading graph

Vue2 implements data request display loading graph, and vue2 implements loading graph

Generally, a project may require that you display a GIF image during a data request, and then disappear after the data is loaded. In general, you only need to write js events in the encapsulated axios. Of course, you must first add this image to app. vue. As follows:

<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 is a variable in vuex. The following definitions are required in store/modules/common. js:

/* This js file is used to store the public vuex status */import api from '. /.. /.. /fetch/api 'import * as types from '. /.. /types. js 'const state = {// loading status when requesting data loading fetchLoading: false} const getters = {// loading status when requesting data fetchLoading: state => state. fetchLoading} const actions = {// status loading FETCH_LOADING ({commit}, res) {commit (types. FETCH_LOADING, res) },} const mutations ={// loading [types. FETCH_LOADING] (state, res) {state. fetchLoading = res }}

The loading component is as follows:

<template> <div class="loading">  </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>

Finally, write and judge the loading event in the axios encapsulated in fetch/api. js:

// Request time of axios let axiosDate = new Date () export function fetch (url, params) {return new Promise (resolve, reject) =>{ axios. post (url, params ). then (response => {// disable loading image disappearance 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) => {// close the loading image to disappear store. dispatch ('fetch _ LOADING ', false) axiosDate = new Date () reject (error)} export default {// public page request function commonApi (url, params) {if (stringQuery (window. location. href) {store. dispatch ('fetch _ LOADING ', true);} axiosDate = new Date (); return FETCH (url, params );}}

In this way, a GIF image is displayed when data is loaded in the project, and the GIF image disappears when the data is loaded.

For more information about how to learn vue. js, click vue. js component learning tutorial and Vue. js front-end component learning tutorial.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.