axios 配置loading_vue axios配置 发起请求加载loading请求结束关闭loading

axios带有请求拦截器，避免在每个请求里面加loading重复操作，可以封装进去，在请求开始时加载loading层，请求结束关闭，loading层用vux的loading加载

axios.js

import axios from 'axios'

import Vue from 'vue'

// 超时时间

axios.defaults.timeout = 15000;

// axios.defaults.withCredentials=true;

// http请求拦截器

axios.interceptors.request.use(config => {

Vue.$vux.loading.show({

text: 'Loading'

})

return config

}, error => {

setTimeout(() => {

Vue.$vux.loading.hide();

Vue.$vux.toast.text('加载超时', 'middle')

},3000)

return Promise.reject(error)

})

// http响应拦截器

axios.interceptors.response.use(data => {// 响应成功关闭loading

Vue.$vux.loading.hide()

return data

}, error => {

setTimeout(() => {

Vue.$vux.loading.hide()

Vue.$vux.toast.text('请求失败', 'middle')

},1000)

return Promise.reject(error)

})

export default axios;

封装get和post方法 axios.service.js

import axios from './axios';

class myAxios{