promise is still pending in then block - how to resolve?

Question

I have code something like -

fetch(`${URL}${PATH}`)
   .then(res => {
       const d = res.json();
       console.log("data is: ", d);

       return d;
    })

It logs data is: Promise { <pending> }.

What to do to see results and utilize in next code statement?

Other questions and answers suggests to use then block to resolve, but I'm still seeing it unresolved.

`res.json()` is asynchronous as well. See the first example here: [MDN: Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch). — Tyler Roper, Jan 22 '19 at 15:10
That suggests `then`to resolve, but mine is pending even in then block. — unknown_boundaries, Jan 22 '19 at 15:12
Have you read Tylers comment? you need to handle the promise in `res.json()` **aswell** — Liam, Jan 22 '19 at 15:13
@Prakhar `fetch` requires *two* `then`s. `fetch() -> then -> result.json() -> then -> process result`. — Tyler Roper, Jan 22 '19 at 15:14
Does this works differtly with `graphql-request` - `return request(this.GRAPHQL_ENDPOINT, query, variables) .then(res => { console.log('data is: ', res); return res; })`? — unknown_boundaries, Jan 22 '19 at 15:40

score 3 · Accepted Answer · answered Jan 22 '19 at 15:14

3

res.json() is asynchronous. You will need to use an additional .then to get the result.

fetch(`${URL}${PATH}`)
  .then(res => res.json())
  .then(d => {
    console.log('data is: ', d);
    return d;
  });

answered Jan 22 '19 at 15:14

Nicholas Tower

Does this works differtly with `graphql-request` - `return request(this.GRAPHQL_ENDPOINT, query, variables) .then(res => { console.log('data is: ', res); return res; })` – unknown_boundaries Jan 22 '19 at 15:38
Apparently I'm getting pending with this now? – unknown_boundaries Jan 22 '19 at 15:39

score -1 · Answer 2 · answered Jan 22 '19 at 15:20

Well If you are getting this type of value Promise { <pending> }. Always remember to resolve it.
So your query would resolve to

fetch(`${URL}${PATH}`)
   .then(res => res.json())
   .then(console.log)
   .catch(console.error)

For better understanding you can leverage the use of async/await feature. The above code would reduce to-

try{
   const res = await fetch(`${URL}${PATH}`)
   const dataAsJson = await res.json()
   console.log(data)
}
catch(ex) {
   console.error(ex)
}

How to resolve in debugger? – mathtick Dec 12 '20 at 09:43 — mathtick, Dec 12 '20 at 09:43

2 Answers2