带有Javascript的多线程请求

Question

大家好，我正在尝试构建一个ReactJS应用程序来控制和监控一些物理设备的状态。为了获取这些物理设备的状态，我使用了如下所示的请求:

axios.get('http://192.168.1.***:8080').then( response => {
    let deviceStatusMode = 0;
    if(response.data.isCritical) {
        deviceStatusMode = 1;
    } else if (response.data.isWarning) {
        deviceStatusMode = 2;
    } else {
        deviceStatusMode = 3;
    }
    let opvObj = {
        "odv1" : deviceStatusMode,
        "odv2" : 2,
        "odv3" : 3
    }
    store.dispatch(odvStatus(opvObj));
});

这一请求需要发送到几个设备(近9-10)。然而，它们中的一些将被关闭，其中一些可能不会回答，那么避免等待请求超时并通过多线程方法合并它们的最佳方法是什么？谢谢!

Answer 1

对于JS中的“并发性”，请考虑使用Promise.all()。

有关更多信息，请访问https://hackernoon.com/concurrency-control-in-promises-with-bluebird-977249520f23。

根据需要编辑下面的代码，但这里有一个粗略的大纲

// assuming these are your devices
const devices = [1, 2, 3, 4, 5, 6, 7, 8, 9]

(async () => {
    // These were then passed to Promise.all() to be executed in parallel. 
    let opvObj = {};
    await Promise.all(devices.map(async (device) => {
        axios.get('http://192.168.1.***:8080')
            .then(response => {
                let deviceStatusMode = 0;
                if (response.data.isCritical) {
                    deviceStatusMode = 1;
                } else if (response.data.isWarning) {
                    deviceStatusMode = 2;
                } else {
                    deviceStatusMode = 3;
                }
                // build up opvObj
                opvObj[`odv${device}`] = deviceStatusMode;
            })
            .catch(error => {
                // do something with the error
                console.log(error)
            });
    }));
    //dispatch 
    store.dispatch(odvStatus(opvObj));
})()

Answer 2

javascript中没有多线程的真正概念--所有的执行都是在一个线程上进行的。但是，因为javascript有一个异步事件循环，所以我们仍然可以互操作代码的不同部分，而不必等待任何http请求的完成。

因为看起来您正在使用redux，所以您所要做的就是保持与现在相同的代码，但您应该增量地更新状态(即，只需要'odv1‘而不是'odv1’- 'odv3‘。再看一看剩馀减速器文档，了解如何做到这一点。

然后，您就可以在彼此之后运行生成几个axios.get调用。由于javascript的异步特性，它们不会相互阻塞(也就是说，http请求将同时运行，而不是严格按顺序执行)：

axios.get('/dev1').then(...);
axios.get('/dev2').then(...);
axios.get('/dev3').then(...);
axios.get('/dev4').then(...);
axios.get('/dev5').then(...);

有关更多信息，请查看有关js事件循环的详细信息。

如果您确实需要对主gui线程单独执行一些操作(即，如果您有10,000+设备状态，您需要一秒地跟上)，您可以查看网络工作者。然而，基于您所共享的内容，我认为这将带来比您的项目所需的更多的复杂性。

编辑：

上述答案之一提出了Promise.all。虽然我喜欢他将核心逻辑提取到它自己的函数中的方法，但是使用Promise.all只是将所有的承诺结合在一起。这仍然会导致你不得不等待，直到你的设备最慢的回应，然后你更新你的商店，这几乎肯定不是你想要的。同样，在返回http请求时，对redux存储执行增量更新几乎肯定是向用户屏幕获取最新信息的最快方法。