1、在request.js
import axios from 'axios';import { Message,Loading } from 'element-ui';import _ from 'lodash';//loading对象let loading; //以后正在申请的数量let needLoadingRequestCount = 0;//显示loadingfunction showLoading(target) { // 判断是因为敞开时加了抖动，此时loading对象可能还存在，但needLoadingRequestCount曾经变成0.防止这种状况下会从新创立个loading if (needLoadingRequestCount === 0 && !loading) { loading = Loading.service({ lock: true, text: "Loading...", spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); } needLoadingRequestCount++;}//暗藏loadingfunction hideLoading() { needLoadingRequestCount--; needLoadingRequestCount = Math.max(needLoadingRequestCount, 0); // 取needLoadingRequestCount和0之间的最大值 if (needLoadingRequestCount === 0) { //敞开loading toHideLoading(); }} //防抖：将 300ms 距离内的敞开 loading 便合并为一次。避免间断申请时， loading闪动的问题。let toHideLoading = _.debounce(()=>{ loading.close(); loading = null; }, 300);export default ( appName , type, { needSuccessTip = false, needErrorTip = true, loading = false, loadingText } = {}) => { // 创立axios实例 let baseURL = appName ? `${window.urlConfig[appName]}` : '' const service = axios.create({ withCredentials: true, baseURL: process.env.BASE_URL, // api的base_url timeout: `${window.urlConfig.apiTimeout}`, headers: { token: localStorage.getItem('token'), 'Content-Type': `application/${ type === 'form' ? 'x-www-form-urlencoded' : 'json' };charset=UTF-8` } }) //增加申请拦截器 service.interceptors.request.use(res=> { if(loading){ showLoading(); } return res; }, (err) => { if(loading){ hideLoading(); } Message.error('申请超时!'); Promise.reject(error) }); //响应拦截器 service.interceptors.response.use( (res) => { if(loading){ hideLoading(); } return res; }, error => { if(loading){ hideLoading(); } Message({ message: error.message, type: 'error' }) return Promise.reject(error); } ) return service}2、在api
import request from '@/request'export function getExportApi (params) { return request( '', '', { loading: true } )({ url: 'xxx, method: 'get', params, responseType: 'blob' })}