最近在用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
})
}
