0

I am using reactJs and facing a problem while working with promise in JS.

I am writing a fetch call to the API and then returning the response back to the component. In component I have written like below.

let response= {};

    const promise = new Promise((resolve,reject) => {
   
        resolve(response= fetchCallApi(request));
    });

promise.then((result) =>{
  console.log('result',result);
  console.log('2', response);
  console.log("3");
});

FetchCallApi is the function I have written in different Js , which will have the fetch method and return the response. Note: I have placed the console.log statement in this js also for the response received from the api.

In Output Console am getting result as empty object and console output for the fetch api call prints even after the console statements in promise.then function.

If i have the promise in place then it should resolve the fetchAPIcall first and print the console message from that call and then should go to promise.then and print both the console.log statements.

Can someone guide why this is happening? and how can I get the response with values and not empty object?

Note: I have even tried with async/await but no luck , can some one please share the code which will work in this case

Edit 1 : Adding the code for fetchCallApi to get clear understanding of my problem

const  fetchCallApi = (request) => {

  let output = {} ;

    fetch('someUrl').then(resp => {
      if (resp) {
      output = resp.response;
    console.log('1  ',output);
      }
    }).catch(error => {
      console.log(error);
    });
    
  return output ;
}
Manoj
  • 2,059
  • 3
  • 12
  • 24
shubham
  • 293
  • 1
  • 2
  • 13
  • `resolve(response= fetchCallApi(request));` does not make sense – epascarello Sep 30 '20 at 14:05
  • 1
    What is `fetchCallApi`? – epascarello Sep 30 '20 at 14:05
  • `fetch` returns a Promise so you don't need to explicitly create one yourself. Also share the code of `fetchCallApi` – Yousaf Sep 30 '20 at 14:05
  • Just do `fetchCallApi(request).then(result => ...)`. – Patrick Roberts Sep 30 '20 at 14:06
  • @epascarello , i have added the fetchCallApi code can you suggest now and share me the code which would work – shubham Sep 30 '20 at 14:15
  • @Yousaf, added the code for fetchcallapi also – shubham Sep 30 '20 at 14:17
  • The edit shows that you expect a future value to be available *now* (`output`). See linked Q&A. It's like you press the "Order" button on an online Pizza delivery site, and wonder why your plate is still empty. `fetch` is asynchronous and returns a promise. You should use it and stick with the asynchronous pattern. – trincot Sep 30 '20 at 14:17
  • `fetchCallApi` function seems unnecessary. You could replace `promise.then(...)` with `fetch(somUrl).then(....)` – Yousaf Sep 30 '20 at 14:19
  • @trincot, due to this i want to wait for the output an then process further , but how to do that .? – shubham Sep 30 '20 at 14:19
  • @shubham, all answers can be found in the linked Q&A. You don't even need `new Promise` -- that is just wrapping a promise with ... a promise. It doesn't help you any further. Just use `fetch`. There are literally hundreds, if not thousands, of working examples on the internet. – trincot Sep 30 '20 at 14:20

0 Answers0