vue 项目中引入Loading拦截器全局加载

1.创建loading.js文件夹

import { Loading } from "element-ui";let loading;/*** 打开次数*/let needLoadingRequestCount = 0;/*** 打开loading*/function startLoading() {loading = Loading.service({lock: true,text: '加载中……',background: 'rgba(0, 0, 0, 0.7)'})}/*** 关闭loading*/function endLoading() {needLoadingRequestCount = 0;loading.close()}/*** 开启loading*/let showFullScreenLoading = () => {if (needLoadingRequestCount === 0) {startLoading()}needLoadingRequestCount++;}/*** 取消loading*/let tryHideFullScreenLoading = () => {//if (needLoadingRequestCount <= 0) returnneedLoadingRequestCount--;if (needLoadingRequestCount <= 0) {endLoading()}}export { showFullScreenLoading, tryHideFullScreenLoading }

2.在拦截器在使用request.js

import { showFullScreenLoading, tryHideFullScreenLoading } from './loading'//1. 创建新的axios实例，let baseURL = 'http.........'const service = axios.create({baseURL: baseURL,// 超时时间 单位是ms，这里设置了3s的超时时间timeout: 3 * 1000,});// 2.请求拦截器service.interceptors.request.use((config) => {NProgress.start();showFullScreenLoading()return config;},(error) => {tryHideFullScreenLoading()return Promise.reject(error);})// 3.响应拦截器service.interceptors.response.use((response) => {tryHideFullScreenLoading()//接收到响应数据并成功后的一些共有的处理，关闭loading等NProgress.done();return response;},(error) => {tryHideFullScreenLoading()if (error && error.response) {// 1.公共错误处理// 2.根据响应码具体处理NProgress.done();} else {// 超时处理}})//4.导入文件export default http;

注释

1.在vue项目中main.js引入element-ui 才可以使用

2.如果是cdn引入element-ui ，loading.js中使用Loading 会有问题

configureWebpack: {externals: {// CDN 的 Element 依赖全局变量 Vue， 所以 Vue 也需要使用 CDN 引入'vue': 'Vue',// 属性名称 element-ui, 表示遇到 import xxx from 'element-ui' 这类引入 'element-ui'的，// 不去 node_modules 中找，而是去找 全局变量 ELEMENT'element-ui': 'ELEMENT','vuex': 'Vuex','axios': 'axios'}}

需要改成 loading = ELEMENT.Loading.service({

lock: true,

text: '加载中……',

background: 'rgba(0, 0, 0, 0.7)'

})