先前完成后循环中的 axios 请求

Question

我正在构建的应用程序涉及将视频帧发送到服务器进行处理。我正在使用 Axios 向服务器发送 POST 请求。我打算每秒发送大约 3-5 帧（POST 请求）。我需要在上一个请求完成后发送一个，因为下一个请求的请求正文中有数据，这取决于上一个请求的响应。

我尝试循环运行它，但不会这样做，因为下一个在前一个完成之前开始。在当前代码中，我有这样的东西-

const fun = () => {
    axios.post(url,data)
         .then((res) => {
              // process the response and modify data accordingly
              // for the next request
          })
         .finally(() => fun());
};

这样我就能够不断地实现一个又一个的请求。但我无法控制每秒发送的请求数。有什么办法可以限制每秒请求的数量最多为 5 个？

附加信息：我将它用于一个网络应用程序，我需要将网络摄像头视频帧（作为数据 URI）发送到服务器进行图像处理，然后将结果返回给客户端。我希望限制请求的数量以减少我的应用程序消耗的互联网数据，因此希望每秒最多发送 5 个请求（最好是均匀分布的）。如果 Axios POST 请求为此目的有更好的方法，请提出建议:)

Answer 1

一个名为 Bottleneck 的神奇库可以在这里为您提供帮助。您可以使用以下代码将每秒请求数限制为您想要的任意数量：

const Bottleneck = require("bottleneck");
const axios = require('axios');
const limiter = new Bottleneck({
    maxConcurrent: 1,
    minTime: 200
});

for(let index = 0; index < 20; index++){
    limiter.schedule(() => postFrame({some: 'data'}))
        .then(result => {
            console.log('Request response:', result)
        })
        .catch(err => {
            console.log(err)
        })
}


const postFrame = data => {
    return new Promise((resolve, reject) => {
        axios.post('https://httpstat.us/200', data)
            .then(r => resolve(r.data))
            .catch(e => reject(e))
    });
}

通过操纵限制器

const limiter = new Bottleneck({
    maxConcurrent: 1,
    minTime: 200
});

您可以让您的 axios 请求以任何速率以任何并发方式触发。 例如，要将每秒请求数限制为 3，您可以将 minTime 设置为 333。按理说，如果您想将其限制为每秒 5 个，则必须将其设置为 200。

请参阅此处的瓶颈文档：https://www.npmjs.com/package/bottleneck