vue在请求拦截中做前置限流

vue在请求拦截中做前置限流

背景： 项目开发过程中，发现有些表单提交请求响应特别慢，用户可能会多次点击，多次触发，需要做节流处理，但当时是对按钮进行节流设置，后续发现项目已经开发过的动能中有很多按钮也需要设置节流，工作量激增，故在请求拦截中设置前置限流，如果是两个相同的请求在1S中内持续触发，则只执行一次。后续加上了限流白名单功能。

话不多说，直接上代码

let requestObj = {}
service.interceptors.request.use(function (config) {
	let requestKey = config.url + sortedParams // 这个是key，标识作用
	let now = new Date().getTime()             // 时间
	if (!getWhiteList(config.url) && requestObj[requestKey] && now - requestObj[requestKey] < 1000 ) {
    	return Promise.reject({isRepeat: true, key: requestKey})
  	}
  	requestObj[requestKey] = new Date().getTime()

  	return config
}

/**
 * 限流白名单
 * @param {*} url 
 */
function getWhiteList(url) {
  const whiteList = ['/global-server/global/tag/getByCode']
  if (whiteList.includes(url)) {
    return true
  } 
  return false
}