在互聯(lián)網(wǎng)應(yīng)用中，我們經(jīng)常用到的場景，比如用戶點(diǎn)擊某個(gè)按鈕，觸發(fā)的操作會和后臺api進(jìn)行數(shù)據(jù)交互，生成一些記錄，比如下單購買。如果后臺api請求比較慢，而客戶端體驗(yàn)又做得不到位，導(dǎo)致用戶以為沒點(diǎn)擊到或者是頁面假死，在上次請求還沒處理完，就再次點(diǎn)擊按鈕。這樣會導(dǎo)致某個(gè)操作生成多次記錄，導(dǎo)致一些異常的bug。

很顯然，后臺的api在這方面是需要做好處理。然而，面對用戶，我們需要更好的體驗(yàn)，可以在客戶端去避免這些問題，前置地解決問題。

最近聽產(chǎn)品經(jīng)理常說，用戶點(diǎn)擊某個(gè)按鈕多次，后臺還沒處理完導(dǎo)致多筆記錄生成，我們需要在用戶點(diǎn)擊后跳轉(zhuǎn)到一個(gè)新的頁面，其實(shí)這根本不是跳頁問題，是程序問題。如果程序員真這么干，是不是要下崗了。

以前偷懶的時(shí)候，在前端我們可能會這么處理：

var getUserDataFlag =false;function getUserData(){if(getDataFlag){return;}  getDataFlag =true;  $.ajax({    url:'/xxx/getUser',    success:function(){      getUserData =false;//todo},    error:function(){      getUserData =false;}})}//當(dāng)接口很多的時(shí)候，我們的代碼就變成這樣var getUserAssetFlag =true;function getUserAsset(){if(getDataFlag){return;}  getDataFlag =true;  $.ajax({    url:'/xxx/getUserAsset',    success:function(){      getUserAssetFlag =false;//todo},    error:function(){      getUserAssetFlag =false;}})}

上面的例子你會發(fā)現(xiàn)，當(dāng)接口越來越多，維護(hù)請求狀態(tài)的變量將會越來越多，并且當(dāng)存在依賴時(shí)，維護(hù)成本更高，也更容易出錯(cuò)。

如何優(yōu)雅地解決這樣的問題，其實(shí)封裝一下請求就能簡單又能自動地處理這個(gè)問題。

最近在重構(gòu)angular的項(xiàng)目以及在寫微信小程序demo，有一些小實(shí)踐和總結(jié)，例子請參照原文鏈接https://github.com/navyxie/avoid-multi-request-from-client-。下面我們以微信小程序請求后臺數(shù)據(jù)為例解說：

 1/4    1 2 3 4 下一頁 尾頁