axios vue 加载效果动画_axios如何在vue.js中实现loading效果

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

})

}