在 React 中反跳 Axios POST 请求答案

【问题标题】：Debounce Axios POST requests in React在 React 中反跳 Axios POST 请求
【发布时间】：2021-08-02 14:55:06
【问题描述】：

我正在用 React 构建一个颜色选择器应用程序。每次颜色变化时，它都会向后端发送一个包含 HEX 值的 POST 请求。它工作正常。问题是达到每分钟最大请求数后，抛出429错误：message: "Too Many Attempts."目标是限制每分钟60个请求。

我尝试使用名为 axios-rate-limit 的包库，代码如下：

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 函数随后被导入 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)
          }
        })
      }, [])

任何帮助将不胜感激。谢谢。

【问题讨论】：

如果是你自己的后端，我认为你需要先弄清楚是什么原因造成的。您的目标应该是缓存前端和后端的结果。

标签： javascript reactjs post axios

【解决方案1】：

您要查找的是throttle 而不是debounce。

Debouce 将函数调用延迟一段时间，如果再次调用该函数，则取消之前的调用。

Throttle rate 通过在每个指定的持续时间内只允许一次调用来限制您的函数调用。

像这样使用它。

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

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

现在，当您想将yourFn 与yourFn('param') 之类的东西一起使用时，请像这样使用throttledYourFn('param')。

【讨论】：