React JS 中的异步 API 获取

Question

I have created two POST services in nodeJS express

• http://localhost:3001 - This service has body request {order:"123"} with method POST & setTimeout for 5000
• http://localhost:3001/details - This service doesn't have any body request or setTimeout

Both above service give a response

• First Response is: Order Code:123
• Second Response is JSON of Order Details: {'Date':'2020-05-12', 'amount':'20'}

I have to create a React JS app to fetch both the services. But I require that when we call both services simultaneously, the second service shouldn't wait for the first service to complete.

Below is my call for the service in 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())
 }

What can I do to async this call's???

Answer 1

You can use promise.all this will make sure that both the API's will get executed independently and also you will get result after both these API's get executed

 //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 [{},{}]
});

Answer 2

As simple as:

loadOrders();
loadOrdersDetails();

The function are called in sequence, but the effective flow it depends on the callback, which will be asynchronous.

However, you must take an appropriate approach for the UI in order to manage the results, if you need them.

Answer 3

If you just call them one after the other, as Mario Vernari suggested on the other answer, you will be calling both of them simultaneously (meaning the second call won't wait for the first one to be finished before being sent).

What I wanted to add is that you probably want to fire both request simultaneosly, in parallel, but then wait for both of them to finish to do something with the result of both of them.

In order to do that, there two approaches:

Using Promise.all

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

Using async/await

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

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

Additionally, you should make both load functions to return a Promise instead.