Vue 2.x 中使用 lodash 去抖功能

透過去抖功能,降低觸發 API 次數超過限制的情形

最近在寫前端部分,有一些功能,是透過呼叫後端的 API,進行資料修改,這部份遇到了存取限制的問題,所以在此篇稍微記錄一下。

在 Laravel 中,API 路由預設會經過一個 ThrottleRequests 中介層,他會限制你在單位時間內,呼叫系統提供的任何 API 的次數,在 Laravel 中預設是每分鐘 60 次(也就是約 1 秒 1 次);

假設今天我有一個功能是按了按鈕,發送一個修改請求給系統端,在正常情況下,會在 1 秒內就完成整個動作;問題在於如果使用者「一直點」這個按鈕,1 秒內送了 1.5 次,那 40 秒之後的請求,就會被系統暫時性的限制存取,在滿 1 分鐘以前,都會收到 429「Too Many Attempts.」的回應。

這邊可以簡單的使用 lodash 這個強大的輔助套件,來解決這個問題;他提供了一個方法叫 debounce,中文叫去抖,有一篇文章已經實現了一些簡單的例子,以下這組是我們需要的功能:

你可以看到你連按 Trigger area 後,經過一段延遲,才會真正被觸發 1 次,而不是每次點每次都觸發。

在 Vue 中(無論是 Laravel 整合的,還是 Vue-cli 都適用),你只要輕輕的 import lodash 這個套件,再把整個 method 包起來,就可以實現,以下是一個簡單的例子,當你連續點按鈕,經過 1 秒延遲,文字才會被真的更新:

感謝強者同事介紹這麼方便的功能。