在vue2中如何实现数据请求显示loading图

/* 此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
 }
}

// 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);
 }
}