问题详细描述
项目设置全局loading动画加载，如果页面一次加载了多个请求 ，当其中有一个接口请求成功后 loading加载动画会消失，但是其实 此时还有一个接口还未 请求成功 那么其实加载动画不应该消失的。
解决方法
多个请求 如果有一个请求成功 则加载动画 就会结束 问题（等所有请求都完成才能结束）- 计数 记录需要加载动画的请求（isLoading不是false的）的接口数量 当关闭时 查看请求（isLoading不是false的）的数量是否完全都走过 确定则关闭
请求接口展示
export function getData() {return request({url: 'order/getData',method: 'post',headers:{isLoading:false//不用使用加载动画loading}})};// 客户白名单export function getWhiteList(params) {return request({url: '/whiteList/list',method: 'post',data:params})};export function removeWhiteList(params) {return request({url: '/whiteList/remove',method: 'post',data:params})};
http.js代码
//插件模块import axios from 'axios' import router from '@/router'import {Loading,Message} from 'element-ui';//引入Loading服务//开始加载动画var loading;var loadingNum=0 //初始化接口数量export function startLoading() {loading = Loading.service({lock:true, //是否锁定text:'Loading...',//加载中需要显示的文字// background:'rgba(0,0,0,.7)',//背景颜色});}//结束加载动画export function endLoading() {loading.close();}// 创建axios实例const service = axios.create({baseURL: process.env.BASE_API, // api的base_url timeout: 60000, // 请求超时时间})// request拦截器service.interceptors.request.use(config => {if(config.url=='/login'){}else{if (sessionStorage.getItem('token')) {// 判断是否存在token，如果存在的话，则每个http header都加上mon['token']=sessionStorage.getItem('token');}}// 查看发送请求的接口有没有设置isLoadingif(config.headers.isLoading !== false){loadingNum++ //记录需要加载动画的接口数量startLoading();//请求时的加载动画}return config},error => {return Promise.reject(error)})// respone拦截器service.interceptors.response.use(response => {if(response.config.headers.isLoading==false){// isLoading 为false时 不做任何处理 防止 有接口成功了 将还未请求成功的接口 的加载动画 给结束掉}else{loadingNum--if(loadingNum==0){endLoading();//结束加载动画}}return response.data},error => {if(error.response){// token失效if(error.response.status==401){Message({message: 'token失效,请重新登录',type: "error"});router.push({name:'login'})}else if(error.response.status==404){Message({message: '服务错误',type: "error"});}}else if(error.request){// 请求超时后 操作if(error.request.readyState == 4 && error.request.status == 0){Message({message: '超过60000毫秒超时',type: "error"});}}loadingNum=0//遇到一个报错 则所有的动画都结束 endLoading();//结束加载动画return Promise.reject(error)})export default service
