Vue 拦截器 多接口调用 实现唯一loding效果 解决同步接口调用loding闪动

大纲

1.引入`import axios from 'axios'`
2.创建loding函数`Loading.service`，创建计数变量`requestCount = 0`，
3.创建axios实例`const service = axios.create()`
4.请求拦截器`service.interceptors.request.use()`
5.响应拦截器`service.interceptors.response()`
6.优化解决同步接口闪动

1.引入import axios from 'axios'及其他

import axios from 'axios';
import {
    
     MessageBox, Message, Loading } from 'element-ui';

2.创建loding函数Loading.service，添加技术变量

Loading = Loading.service({
    
    
  lock: true,
  text: '加载中……',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
});

let requestCount = 0

3.创建axios实例const service = axios.create()

const service = axios.create({
    
    
  baseURL: config.BASE_API,
  timeout: 30000 // 请求超时
});

4.请求拦截器service.interceptors.request.use()

service.interceptors.request.use(
  (config) => {
    
    
  	requestCount++
  	Loading()
  	// 逻辑……
	return config
  }
}

5.响应拦截器service.interceptors.response()

service.interceptors.response.use(
  (response) => {
    
    
  	requestCount--
  	if(requestCount === 0){
    
    
  		Loading.close()
  	}
  	// 逻辑……
  	return response.data
  }
}

6.优化解决同步接口闪动

说明：以上对于异步接口多接口已经可以有效解决了，但是很多时候在框架封装的时候我们还会遇到多个同步接口的调用情况，由于存在依赖关系就必须一个一个调用，导致出现loding闪现的效果，对于这种情况我们可以使用setTimeout延时解决。

实例：

/**
 * 思路：
 * 1.在loding关闭方法添加setTimeout延时处理
 * 2.在request中进行判断，存在setTimeout值，直接清除setTimeout达到清除操作
*/
let t

service.interceptors.request.use(
  (config) => {
    
    
  	requestCount++
  	// 清除setTimeOut
  	if (this.t) clearTimeout(this.t)
    // loding
  	Loading()
  	// 逻辑……
	return config
  }
}

service.interceptors.response.use(
  (response) => {
    
    
  	requestCount--
  	if(requestCount === 0){
    
    
  		this.t = setTimeOut(()=>{
    
    
			Loading.close()
		},500)
  	}
  	// 逻辑……
  	return response.data
  }
}

解析：由上面的方法我们可以看到当要执行关闭loding时，我们添加延时。下一同步接口调用时就会判断是否存在延时，存在就直接清除延时使关闭方法不执行，以此类推，直到没有下一接口调用时，我们才执行关闭。

结束。