Javascript 在上一次完成后,Axios请求在循环中

Javascript 在上一次完成后,Axios请求在循环中,javascript,axios,httprequest,synchronous,Javascript,Axios,Httprequest,Synchronous,我正在构建的应用程序涉及将视频帧发送到服务器进行处理。我正在使用Axios向服务器发送POST请求。我打算每秒发送大约3-5帧(POST请求)。我需要在前一个请求完成后发送一个,因为下一个请求的请求正文中有数据,这取决于前一个请求的响应 我试着在一个循环中运行它,但那不行,因为下一个循环在前一个循环完成之前启动。在当前代码中,我有这样的代码- const fun = () => { axios.post(url,data) .then((res) => {

我正在构建的应用程序涉及将视频帧发送到服务器进行处理。我正在使用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个


其他信息:我将此应用程序用于一个web应用程序,其中我需要将网络摄像头视频帧(作为数据URI)发送到服务器进行图像处理,然后将结果返回给客户端。我希望限制请求的数量,以减少我的应用程序使用的internet数据,因此希望以每秒最多5个请求的速度发送(最好均匀分布)。如果有更好的方法让Axios发布请求,请建议:)

一个名为瓶颈的神奇库可以帮助您。您可以使用以下代码将每秒的请求数限制为所需的任意数目:

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))
    });
}
您可以通过任何并发性以任何速率启动axios请求。 例如,要将每秒的请求数限制为3,可以将
minTime
设置为
333
。当然,如果您想将其限制为每秒5次,则必须将其设置为
200


请参阅此处的瓶颈文档:

一个名为瓶颈的神奇库可以在此处为您提供帮助。您可以使用以下代码将每秒的请求数限制为所需的任意数目:

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))
    });
}
您可以通过任何并发性以任何速率启动axios请求。 例如,要将每秒的请求数限制为3,可以将
minTime
设置为
333
。当然,如果您想将其限制为每秒5次,则必须将其设置为
200



请参阅此处的瓶颈文档:

只要我的2美分,这听起来像是一个使用WebSocket的好例子,如果后端支持WebSocket的话。您看过瓶颈吗@弗拉基米尔博戈莫洛夫我知道我可以使用websockets。只是想知道我的方法是否有缺点或缺陷?我在后端使用python和flask,因此websockets可能是supported@Ak47WebSocket的优点是,您可以在不进行每次post/get请求通常需要的持续握手的情况下来回发送数据。一旦打开websocket频道,数据流就非常简单,后端处理websocket数据的成本比连续post请求要低。只要我2美分,如果后端支持websocket,这听起来像是一个使用websocket的好例子。你看过瓶颈了吗@弗拉基米尔博戈莫洛夫我知道我可以使用websockets。只是想知道我的方法是否有缺点或缺陷?我在后端使用python和flask,因此websockets可能是supported@Ak47WebSocket的优点是,您可以在不进行每次post/get请求通常需要的持续握手的情况下来回发送数据。一旦打开websocket频道,数据流就变得非常简单,后端处理websocket数据的成本比连续的post请求要低。谢谢……在我的情况下,这看起来会起作用。我会试试的。我试过这个库,但它不适用于无限循环。在我的情况下,我必须让请求一直运行,直到客户端停止。似乎库正在排队等待从开始到停止的所有请求,以实现每个请求的minTime。我认为,如果我想让它长时间运行,这将是一项艰巨的任务,因为所有队列都是从一开始就排队的。有没有一种方法可以让我只计划每秒5个请求,然后无限循环它,而不必像这个库那样维护队列?@Ak47我不知道。这是我会考虑的,但同时,让我指出,我使用这段代码使用axios逐行发布文件中的记录。我每秒发送4个请求。有些文件包含上百万行,而这个傻瓜每次在相当普通的硬件上都像个魔咒一样工作。所以,如果你特别担心它最终会占用太多资源,我认为你可能会没事。它有一个漂亮的
limiter.stop()
函数来任意终止执行。它似乎在循环中运行数十万次,但如果我再增加循环,它就会开始滞后。这可能意味着它正在消耗资源。虽然我的用例只需要更少的循环,但我只是想知道是否有一种方法可以处理需要无限期地保持请求的情况。我会看看是否有办法实现我上面所描述的。谢谢你的帮助:)@Ak47非常有趣的观察。您是否在浏览器中运行流程?当我的东西在节点服务器上运行时,我不承认在浏览器中使用Bottlenck的任何经验。谢谢…这看起来在我的情况下会起作用。我会试试的。我试过这个库,但它不适用于无限循环。在我的情况下,我必须让请求一直运行,直到客户端停止。似乎库正在排队等待从开始到停止的所有请求,以实现每个请求的minTime。我认为,如果我想让它长时间运行,这将是一项艰巨的任务,因为所有队列都是从一开始就排队的。有没有一种方法可以让我只计划每秒5个请求,然后无限循环它,而不必像这个库所看到的那样维护队列