import axios from 'axios' import { Message } from 'element-ui' import store from '@/store' import { getToken } from '@/utils/auth' import { Loading } from 'element-ui' let loading //定义loading变量 function startLoading () { //使用Element loading-start 方法 loading = Loading.service({ lock: true, text: '加载中……', background: 'rgba(0, 0, 0, 0.7)' }) } function endLoading () { //使用Element loading-close 方法 loading.close(); } //那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。 //声明一个变量 needLoadingRequestCount,每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。 //调用tryHideFullScreenLoading()方法,needLoadingRequestCount - 1。needLoadingRequestCount为 0 时,结束 loading。 let needLoadingRequestCount = 0 function showFullScreenLoading () { if (needLoadingRequestCount === 0) { startLoading() } needLoadingRequestCount++ } function tryHideFullScreenLoading () { if (needLoadingRequestCount <= 0) return needLoadingRequestCount-- if (needLoadingRequestCount === 0) { endLoading(); } } // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // create an axios instance const service = axios.create({ baseURL: '', // url = base url + request url // withCredentials: true, // send cookies when cross-domain requests timeout: 5000 // request timeout }) // { fullscreen: true, text: '努力加载中', spinner: 'el-icon-loading' } // request interceptor service.interceptors.request.use( config => { // do something before request is sent showFullScreenLoading() if (store.getters.token) { // let each request carry token // ['X-Token'] is a custom headers key // please modify it according to the actual situation config.headers['Authorization'] = getToken() } return config }, error => { // do something with request error // console.log(error) // for debug return Promise.reject(error) } ) // response interceptor service.interceptors.response.use( res => { //res.code !== 200 let data = JSON.parse(JSON.stringify(res.data)) if (data.code != 200) { Message({ message: data.msg || `请求失败code码为${res.code}`, type: 'error', duration: 5 * 1000 }) // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired; if (res.code === 401 || res.code === 403) { this.$message({ message: '登录超时请重新登录', type: 'warning' }) store.dispatch('user/resetToken').then(() => { location.reload() }) } tryHideFullScreenLoading() return Promise.reject(new Error(res.msg || 'Error')) } else { tryHideFullScreenLoading() return data } }, error => { // console.log('err' + error) // for debug Message({ message: error.message, type: 'error', duration: 5 * 1000 }) tryHideFullScreenLoading() return Promise.reject(error) } ) export default service