Javascript React JS中的异步API获取

我在nodeJS express中创建了两个POST服务

• http://localhost:3001 -此服务具有主体请求{order:“123”}，方法为POST&setTimeout，长度为5000
• http://localhost:3001/details -此服务没有任何正文请求或设置超时

以上两种服务都给出了响应

• 第一个响应是：订单代码：123
• 第二个响应是订单详细信息的JSON:{'Date'：'2020-05-12'，'amount'：'20'}

我必须创建一个React JS应用程序来获取这两个服务。但我要求，当我们同时调用两个服务时，第二个服务不应等待第一个服务完成

下面是我对REACT JS中服务的调用

const loadOrders = () =>{
   fetch("http://localhost:3001",{
     method:'POST',
     body: JSON.stringify({orderReferenceCode: 'GBP-000237453'}),
     headers: {
      "Content-type": "application/json; charset=UTF-8"
     }
     })
   .then(res => (res.ok ? res : Promise.reject(res)))
   .then(res => res.json())
 }

 const loadOrdersDetails = () =>{
   fetch("http://localhost:3001/details",{
     method:'POST',
     headers: {
      "Content-type": "application/json; charset=UTF-8"
     }
     })
   .then(res => (res.ok ? res : Promise.reject(res)))
   .then(res => res.json())
 }

如何异步此调用？

简单到：

loadOrders();
loadOrdersDetails();

函数是按顺序调用的，但其有效流取决于回调，回调将是异步的

---

但是，如果需要，您必须为UI采取适当的方法来管理结果。

您可以使用promise。所有这些都将确保两个API都将独立执行，并且在两个API执行后您也将得到结果

 //first api which is returning promise

 const loadOrders = () =>{
   new Promise((resolve, reject) => {
        fetch("http://localhost:3001",{
          method:'POST',
          body: JSON.stringify({orderReferenceCode: 'GBP-000237453'}),
      headers: {
          "Content-type": "application/json; charset=UTF-8"
      }
        })
   .then(res => (res.ok ? res : reject(res)))
   .then(res => resolve(res.json()))
   });
   
 }

 //second api which is returning promise
 const loadOrdersDetails = () =>{
   new Promise((resolve, reject) => {
        fetch("http://localhost:3001/details",{
          method:'POST',
      headers: {
          "Content-type": "application/json; charset=UTF-8"
      }
     })
     .then(res => (res.ok ? res : reject(res)))
     .then(res => resolve(res.json()))
   })
 }
 
 Promise.all([loadOrders, loadOrdersDetails]).then((res) => {
    //here in res you will get reponse in array as output json from both the api [{},{}]
});

---

如果你只是一个接一个地给他们打电话，正如马里奥·韦纳里在另一个回答中所建议的那样，你将同时给他们两个打电话（这意味着第二个电话不会等到第一个电话完成后才被发送）

我想补充的是，您可能希望同时、并行地触发这两个请求，但随后等待它们完成，以处理它们的结果

为此，有两种方法：

使用

承诺。所有

Promise.all([
  loadOrders(),
  loadOrdersDetails(),
]).then(([orderCode, orderDetails]) => {
    // Do something
}).catch((err) => {
    console.log(err);
}); 

try {
  let [orderCode, orderDetails] = await Promise.all([
    loadOrders(),
    loadOrdersDetails(),
  ]);

    // Do something
  );
}
catch(err) {
  console.log(err);
};

使用

异步/等待

Promise.all([
  loadOrders(),
  loadOrdersDetails(),
]).then(([orderCode, orderDetails]) => {
    // Do something
}).catch((err) => {
    console.log(err);
}); 

try {
  let [orderCode, orderDetails] = await Promise.all([
    loadOrders(),
    loadOrdersDetails(),
  ]);

    // Do something
  );
}
catch(err) {
  console.log(err);
};

---

此外，您应该让两个加载函数都返回一个承诺。

因此，像这样调用函数将是异步的。。？？它不会等待加载loadOrders？？当您调用

fetch

时，请求将立即启动，但是fetch函数本身（比方说）已经结束，您将立即退出该函数。当响应到达时，将调用

然后
方法。也是true。这取决于（1）帖子是否有答案需要处理，以及（2）GUI的期望行为是等待这两个响应，还是仅仅更新进度条，例如。我知道这不是你所要求的，但你确定你必须在不等待
loadOrders
的情况下调用
loadOrdersDetails
？如果第一次发布失败，订单无法创建，该怎么办？之后您将发布哪些订单详细信息？同样，我不知道您的应用程序，但在我看来，您需要一个“订单代码”来发布订单详细信息，如果不知道，您不知道这些详细信息属于哪个订单。嗨，Dglozano，不，这两个服务并不相互依赖。。但是loadOrders需要等待5秒&loadOrdersDetails根本没有等待。你说的等待是什么意思？你是如何调用这些函数的？我的意思是等待，second orderDetails服务应该在没有order服务响应的情况下运行。如果你按照我们在回答中指出的方式调用它们，就会发生这种情况。如果仍不起作用，则应上传调用这些函数的代码，以便我们提供进一步帮助：）