最近在用vue.js做后臺管理系統(tǒng)，UI框架用的是餓了么的element-ui，接口調(diào)用用的是axios
在做后臺管理系統(tǒng)的過程遇到如何實現(xiàn)loading效果的問題兄墅，想在axios請求過程中實現(xiàn)脐嫂，方便調(diào)用。
目錄結(jié)構(gòu)如下
Paste_Image.png
巧用axios中的攔截器故源，用element-ui里的Loading組件污抬，完美實現(xiàn)loading效果的加載，代碼如下
fetch.js是對全局axios的封裝
axios封裝的代碼如下：
// 創(chuàng)建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攔截器绳军，實現(xiàn)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攔截器印机，實現(xiàn)loading關(guān)閉
service.interceptors.response.use(data => {
loadingInstance.close()
return data
}, error => {
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
})
所有的接口調(diào)用寫在專門的api文件夾里面，每次調(diào)用axios實例门驾，配置相應(yīng)的config參數(shù)射赛，代碼如下
import fetch from '@/utils/fetch'
import Service from './services'
export function getList (query) {
return fetch({
url: Service.getList,
method: 'get',
params: query
})
}
