在 React 中去抖動 Axios POST 請求

Question

我正在 React 中構建一個顏色選擇器應用程序。 每次顏色變化時，它都會向后端發送一個包含 HEX 值的 POST 請求。 它工作正常。 問題是在達到每分鍾最大請求數后，會拋出429錯誤： message: "Too Many Attempts." 目標是將請求限制為每分鍾 60 個。

我嘗試使用名為axios-rate-limit的 package 庫，代碼如下：

import Axios from 'axios'
import rateLimit from 'axios-rate-limit'

export const sendRequest = (param) => {
  const request = rateLimit(Axios.create(), { maxRequests: 60, perMilliseconds: 60000 })
  request
    .post(URL, { colour: param })
    .then(response => console.log(response.data))
    .catch(e => console.log(e))
}

我也嘗試過 lodash 的 debounce，但我不確定我是否正確實施它？

import Axios from 'axios'
import _ from 'lodash'

export const sendRequest = param => {
  const request = _.debounce(() => {
    Axios.post(URL, { colour: param })
      .then(response => console.log(response.config))
      .catch(e => console.log(e))
  }, 60000)
  request()
}

然后將sendRequest function 導入 React 組件並在 useEffect 掛鈎中啟動，如下所示：

import { sendRequest } from './sendRequest'

 useEffect(() => {
        const targetEl = document.querySelector('.js_colourPicker')
        new ReinventedColorWheel({
          appendTo: targetEl,
          //the onChange method triggers every time the colour changes on the colour wheel
          onChange: color => { 
            let colour = HSLToHex(color.hsl[0], color.hsl[1], color.hsl[2])
            sendRequest(colour)
          }
        })
      }, [])

任何幫助將不勝感激。 謝謝。

Answer 1

您正在尋找的是throttle而不是debounce 。

如果再次調用Debouce ，Debouce 將 function 調用延遲一段時間並取消前一個調用。

Throttle速率限制您的 function 調用，每個指定的持續時間只允許一個調用。

像這樣使用它。

const yourFn = (param) => {
    // do something
}

const throttledYourFn = _.throttle(yourFn, 1000);

現在，當您想將yourFn與類似yourFn('param')東西一起使用時，可以像這樣使用它throttledYourFn('param') 。