express/react 与后端通信的进度条答案

【问题标题】：Progress bar for express / react communicating with backendexpress/react 与后端通信的进度条
【发布时间】：2022-07-04 20:50:29
【问题描述】：

我想制作一个进度条，告诉用户在获取我的后端 API 的过程中在哪里。但似乎每次我发送响应都会停止请求，我该如何避免这种情况以及我应该在谷歌上了解更多信息，因为我没有在网上找到任何东西。

反应：

const {data, error, isError, isLoading } = useQuery('posts', fetchPosts) 
if(isLoading){<p>Loadinng..</p>}
return({data&&<p>{data}</p>})

快递：

app.get("api/v1/testData", async (req, res) => {
    try {
        const info = req.query.info
        const sortByThis = req.query.sortBy;
        if (info) {
            let yourMessage = "Getting Data";
            res.status(200).send(yourMessage);
            const valueArray = await fetchData(info);
            yourMessage = "Data retrived, now sorting";
            res.status(200).send(yourMessage);
            const sortedArray = valueArray.filter((item) => item.value === sortByThis);
            yourMessage = "Sorting Done now creating geojson";
            res.status(200).send(yourMessage);
            createGeoJson(sortedArray)
            res.status(200).send(geojson);
        }
        else { res.status(400) }
    } catch (err) { console.log(err) res.status(500).send }
}

【问题讨论】：

标签： node.js express asynchronous async-await

【解决方案1】：

您只能对 HTTP 中的请求发送一个响应。

如果您想使用 HTTP 进行状态更新，客户端需要轮询服务器，即从服务器请求状态更新。请记住，虽然每个请求都需要在服务器端进行处理，并且会占用资源，但这些资源对于来自其他客户端的其他（更重要的）请求是不可用的。所以不要太频繁地投票。

如果您想使用 HTTP 支持长时间运行的操作，请查看以下API design pattern。

或者，您也可以使用WebSockets 连接将更新从服务器推送到客户端。我假设您在后端的计算不会持续几分钟，并且您希望实时更新客户端，因此 WebSockets 可能是您的最佳选择。与在客户端和服务器之间发送大量 HTTP 请求/响应相比，WebSocket 连接一旦建立，开销就少得多。

看看this thread，它讨论了上述和其他可能性。

【讨论】：