前端防止重复发送Ajax 请求

前言

一般为了防止重复发送Ajax 请求，可以通过变量或按钮的状态去控制是否发送请求，但这样每个业务都得编写类似的代码，非常影响开发效率，所以这里结合axios和lodash推荐更合适的防止重复发送Ajax请求的方案：

一，独占请求

顾名思义，即在时刻内只允许一个请求存在，必须等到该请求成功或失败后才能开始下一个请求。如有多个操作都采取这种方式，会严重影响用户体验，建议使用在往数据库插入记录如创建用户等场景。

import axios from 'axios';
function doSubmit(url,params){
	if(axios.isPending){
		console.log('Requests are too frequent. Please try again later.');
	 	return;
	}
	axios.isPending = true;
	axios.post(url, params).then(res=>{
			//doSomething...
		}).finally(()=>{
		      axios.isPending = false;
		});
}

二,防抖请求

防抖，指连续触发事件但是在有效时间内只执行一次函数。节流会减少函数的执行频率。该方式非常适合input输入框远程搜索等功能。

import axios from 'axios';
import _ from 'lodash';
const doSubmit=_.throttle(function(url,param){
      axios.get(url, param).then(res=>{	/