Javascript Fetch API太快;在第二个HTTP(获取api)请求之前完成

我有2个使用Java提取API的HTTP请求。我的主要语言是Java,但是我要负责一个前端项目,因此我不确定是否有一个简单的解决方案。我的问题是,第一个调用(命中一个随机服务器)正在命中一个与第二个外部端点(此端点位于Azure上)不同的外部端点,但是第二个端点依赖于第一个端点。基本上,第一个终结点是POST请求,该请求在Azure网站(IoT中心)上创建/填充对象/ IoT设备。因此,第二个请求实际上无法执行任何操作(在本例中为PATCH),直到该设备显示在网站上。我注意到它通常需要几秒钟的时间,例如它出现之前的1-5秒。

我的Fetch API看起来像这样:

fetch('https://first-API-endpoint-on-random-server.com/creates-thing-on-Azure', {
  method: 'POST',
  headers: myHeaders,
  body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);

  // Beginning of nested Fetch
  return fetch('https://second-DIFFERENT-API-endpoint-on-azure.com/tries-to-edit-thing-on-Azure', {
      method: 'PATCH',
      headers: myHeaders,
      body: JSON.stringify(data),
    })
    .then(response => response.json())
    .then(data => {
      console.log('Success:', data);
    })
    .catch((error) => {
      console.error('Error:', error);
    });
})

因此,基本上,您在我的网站UI上单击了一个按钮,它应该运行此onClick函数并通过第一个Fetch API调用在Azure上创建/填充对象/ IoT设备,然后第二个Fetch API调用应该“ PATCH”它或编辑JSON。

第一个API调用始终有效,但问题是第二个API调用似乎总是会因404“找不到设备”错误而失败,因为我认为第一个调用完成得太快,然后第二个调用尝试修补某些未完成的操作。甚至还没有出现在网站上。我的解决方案是将API调用划分/拆分为两个不同的click事件,这解决了该问题,因为当用户单击第二个按钮时,第二次访存API调用/ PATCH通常总是成功。

我真的很想将它们组合成一个函数,以便用户永远不了解PATCH事件/ http调用。我如何才能使第二个Fetch真正起作用?

我可以提供您想要的任何详细信息,请谢谢

评论