前端防止重複發送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=>{	//doSomething... })
},2000);

三，節流請求

節流，指觸發事件後在 給定時間內函數只能執行一次，如果在給定時間內又觸發了事件，則會重新計算函數執行的時間。和keyup事件觸發類似，該請求非常適合頻繁點擊的情形，如保存草稿的場景，但是時間間隔需設置得比較合理。

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

四，緩存請求

緩存請求的意思是將請求結果緩存起來，對於同樣的參數，每次都返回緩存德結果，避免無用的請求。該方式非常適合獲取用戶配置，生成固定二維碼等場景，缺點是獲取到的結果可能不是服務器上最新的結果。
這裏使用開源的小插件實現緩存請求:

import axios from 'axios';
import _ from 'lodash';
import wrapper from 'axios-cache-plugin'
let http = wrapper(axios, {
  maxCacheSize: 15
})
//url符合規則才能過濾
http.__addFilter(/test/)

function doSubmit(url,param){
	http({
          url: url,
          method: 'get',
          params:param
        }).then(res=>{
				//doSomething... 
        })
}
 

五，貪婪請求

允許用戶提交多個請求，捨棄前幾個未請求成功的請求，保留最後一次請求的結果。

import axios from 'axios';
//生成cancel令牌，沒個請求攜帶一個令牌用於標識。
let CancelToken = axios.CancelToken;
let source = CancelToken.source();

function doSubmit(url,param){
	//請求前清掉之前所有的請求
	source.cancel('Operation canceled by the user.');
	//重新生成新的令牌，發新新的請求
    CancelToken = axios.CancelToken;
    source = CancelToken.source();
    axios.post(url,param,{  cancelToken: source.token} ).then(res=>{
     	//doSomething... 
      })
    },
}