在 React 中去抖动 Axios POST 请求

Question

I'm building a colour picker application in React. It sends a POST request containing the HEX value to the backend, every time the colour changes. And it works fine. The problem is that after it reaches the maximum number of requests per minute, it throws a 429 error: message: "Too Many Attempts." The goal is to limit the requests to 60 per minute.

I've tried using a package library called axios-rate-limit and here's the code:

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))
}

I've also tried lodash's debounce but I'm not sure I'm implementing it correctly?

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()
}

The sendRequest function then gets imported into the React component and launches in the useEffect hook like this:

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)
          }
        })
      }, [])

Any help would be greatly appreciated. Thanks.

Answer 1

What you are looking for is throttle and not debounce .

Debouce delayes the function call by a duration and cancels the previous call if the function is called again.

Throttle rate limits your function call by allowing only one call per duration specified.

Use it something like this.

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

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

Now, when you want to use your yourFn with something like yourFn('param') , use it like this throttledYourFn('param') .