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{