Reactjs React JS-为每个表行调用相同的API端点，直到响应包含某些条件

我有一个应用程序，它需要调用相同的端点，但表的每一行都有不同的参数

到目前为止，我的应用程序如下所示：

这样做的目的如下：

单击“生成旅程”按钮时，它将向服务器发布一组数据，并得到如下响应：

{
  "id": 1,
  "customerId": "db7dab81-0b33-41d3-a4a9-861a45c282b5",
  "serviceId": "ac1f0b6f-593e-4377-9697-d8dbe06c6309",
  "numberOfJourneys": 3,
  "generationStatus": "QUEUED",
}

请注意排队状态。后端将生成行程，一旦完成，状态将更改为

completed

一旦创建了旅程，我们就可以通过单击Simulate按钮来模拟它，然后依次将一些数据发布到另一个API并模拟旅程

现在我的问题是：

实现此功能的最佳方式是什么？因为我必须反复调用端点来检查状态是否为

COMPLETED

，然后才能为每个表行模拟旅程

目前为止，我还没有一个解决方案，但我的想法大致如下：

getJourneyEmulations() {
    let promise;
    promise = journeyCreationStatus();

    if (!promise) {
        return;
    }

    this.setState({
        isLoading: true
    });

    promise.then(response => {
        const generationStatus = this.state.generationStatus;
        this.setState({
            generationStatus: generationStatus,
            isLoading: false
        })
    }).catch(error => {
        this.setState({
            isLoading: false
        });
        console.log(error);
    })
}

然后使用

componentDidMount

中的计时器调用它，如：

 componentDidMount() {
    this.getRouteGenerations();
    this.timer = setInterval(()=> this.getJourneyEmulations(), 10000)
}

但是，我认为这不会起作用，因为我需要为每个表行调用它

如果需要更多解释，请留下评论，我会尽力解释

---

谢谢

所以对于这类问题有多种选择，例如长轮询或WebSocket，但我假设您没有访问服务器的权限，所以唯一的选择是重复调用服务器

另外，我猜你会在开始时发送一个帖子，然后端点（或其他端点）会通过GET向你提供生成状态是否完成的信息

多次获取直到成功的代码可能如下所示：

consturl='your/api/url/'；
常数间隔μMS=5000；
函数延迟（）{
返回新承诺（resolve=>setInterval（resolve，INTERVAL\u MS））
}
功能已完成（数据）{
return data.generationStatus===“已完成”
}
功能后行程（数据）{
回传(
网址，
{
方法：'POST'，
正文：JSON.stringify（数据）
})
.then（response=>response.json（））
}
函数检查状态未完成（）{
返回获取（url）
.then（response=>response.json（））
。然后（json=>{
如果（！isCompleted（json））{
//如果未完成，我们会在延迟一段时间后重试
返回延迟（）。然后（检查状态未完成）
}
否则{
return Promise.resolve（json）
}
})
}
函数PostJourney和CheckUntlCompleted（行数据）{
旅行后（rowData）
。然后（json=>{
如果（！isCompleted（json））{
返回延迟（）。然后（检查状态未完成）
}
否则{
return Promise.resolve（json）
}
})
。然后（（数据）=>{
//做点什么，现在就完成了
})
}

此外，您可能希望处理HTTP错误、CSRF令牌和/或使用自定义的获取包装器

然后，您可以通过以下方式从render函数调用PostTravely：

rowDatas.map（（rowData）=>(
{rowData.customerId}
/* ... */
PostJourney和CheckUntlCompleted（rowData）}>生成旅程
)

---

Cheers

如果您拥有或可以修改服务器，请看一看，这样您可以在

队列

完成时通知您的客户机虽然这是轮询的好代码，但OP主要询问如何为旅程表中的每一行创建和管理状态更改轮询请求，OP演示了处理问题中已存在NE轮询请求。clearInterval从未在操作代码中调用，因此它将继续运行。同时，将其用于多行也是非常直接的，只需使用单击按钮的行的数据调用PostTravel即可。然后调整您的答案以演示如何管理多行，特别是在非常直接的情况下P直接要求我没有访问服务器的权限，但我的一位同事有。实现web套接字解决方案会更容易吗？这取决于技术。例如，如果您使用Django作为后端，可能需要更改一点架构（WSGI->ASGI，可能是一个Redis服务器，用于跨多个客户端共享事件）。如果您使用的是Node，则没有那么复杂，但需要一些设置。