vue2整个项目中,数据请求显示loading图----------未完成阅读,码

一般项目中,有时候会要求,你在数据请求的时候显示一张gif图片,然后数据加载完后,消失。这个,一般只需要在封装的axios中写入js事件即可。当然,我们首先需要在app.vue中,加入此图片。如下:





这里的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组件如下:





最后在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图片,当数据加载出来时消失。希望能帮到需要的人

转载于:https://www.cnblogs.com/moxiaowohuwei/p/7388404.html

你可能感兴趣的:(vue2整个项目中,数据请求显示loading图----------未完成阅读,码)