在 socket.on 事件中异步函数答案

【问题标题】：async a function in a socket.on event在 socket.on 事件中异步函数
【发布时间】：2020-03-17 05:14:09
【问题描述】：

我有一个 node.js 后端向名为 chartDataIncomingFromBackend 的前端浏览器发出 socket.io 事件。它传递“数据”，这是将通过 for 循环更新图表的图表数据。我似乎无法让异步方面工作，因为 for 循环仍然阻塞主线程。您能否告诉我需要更改哪些内容才能正常运行异步？

我得到的控制台违规是这样的：

[Violation]“消息”处理程序耗时 5461 毫秒

在函数 pushNewChartDataToFrontend() 完成之前，页面不会让我做任何事情。

async function pushNewChartDataToFrontend(data){
    let promise = new Promise((resolve,reject) =>{          
        if(data) {
            console.log('here is the chartDataIncomingFromBackend data');
            console.log(data);

            for (let elem in data['data']){
                console.log('inside for loop for chartDataIncomingFromBackend');            
                var utc_timestamp = moment.utc(data['data'][elem]['end_time']);
                //valueOf gets the value of utc time
                chartDate = Number(utc_timestamp.valueOf());

                dataTable.addData([{"x": chartDate, "open": data['data'][elem]['open'], "high": data['data'][elem]['high'], "low": data['data'][elem]['low'], "close": data['data'][elem]['close']}]);      
            }

            resolve('frontend updated with new chart data');    

        } else {
            console.log("There is a problem:", data);
            reject(Error('Frontend had and error updating the chart'));
        }               
    });

    let result = await promise;
    //console.log(result);
}


socket.on('chartDataIncomingFromBackend', async (data) => {
    await pushNewChartDataToFrontend(data).then(console.log('update the chart is done'));
});

【问题讨论】：

标签： javascript asynchronous async-await dom-events

【解决方案1】：

如果你用await调用函数pushNewChartDataToFrontend，那么你不需要在函数上使用then。

var returnValue = await pushNewChartDataToFrontend(data);

returnValue 将保存函数的返回值

【讨论】：