最近在用vue.js做后台管理系统，UI框架用的是饿了么的element-ui，接口调用用的是axios
在做后台管理系统的过程遇到如何实现loading效果的问题，想在axios请求过程中实现，方便调用。
目录结构如下

Paste_Image.png

巧用axios中的拦截器，用element-ui里的Loading组件，完美实现loading效果的加载，代码如下
fetch.js是对全局axios的封装
axios封装的代码如下：

// 创建axios实例
import axios from 'axios'
import {Loading, Message} from 'element-ui'

const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000          // 请求超时时间
});

// request拦截器，实现loading加载
service.interceptors.request.use(config => {
  loadingInstance = Loading.service({})
  return config
}, error => {
  loadingInstance.close()
  Message({
    message: error.message,
    type: 'error',
    duration: 5 * 1000
  })
  return Promise.reject(error)
})

// response拦截器，实现loading关闭
service.interceptors.response.use(data => {
  loadingInstance.close()
  return data
}, error => {
  Message({
    message: error.message,
    type: 'error',
    duration: 5 * 1000
  })
  return Promise.reject(error)
})

所有的接口调用写在专门的api文件夹里面，每次调用axios实例，配置相应的config参数，代码如下

import fetch from '@/utils/fetch'
import Service from './services'

export function getList (query) {
  return fetch({
    url: Service.getList,
    method: 'get',
    params: query
  })
}