fetch res.json continues to return unresolved promise

Question

I'm expecting this:

fetch('https://response.democratsabroad.org/photos/?tag=alex')
    .then(res=>res.json())
    .then(res=>console.log(res))

to return a json object. Instead it is returning an pending promise.

Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}

screenshot of javascript console Why would it be passing the unresolved promise instead of the resolved value?

then why would the `.then(res=>res.json())` return an object with the values, but continuing with `.then(res=>console.log(res))` is undefined? or maybe I'm asking, what I would need to do to console.log the json object that eventually resolves in .then(res=>res.json()) — Alex Montgomery, Aug 18 '17 at 05:39
`No 'Access-Control-Allow-Origin' header is present on the requested resource.`, `Uncaught (in promise) TypeError: Failed to fetch` — guest271314, Aug 18 '17 at 05:42
@JaromandaX The URL that you posted redirects to the portion of the URL following first `.`, at which cannot reproduce the result described at OP — guest271314, Aug 18 '17 at 05:47
just updated the cors to access-control-allow-origin so now it should work for you. The data loads in the browser or postman, just not in fetch. — Alex Montgomery, Aug 18 '17 at 05:48
@JaromandaX Why "expect" anything other than the actual text at Question? — guest271314, Aug 18 '17 at 05:53
@AlexMontgomery What is the issue with code at Question? Did you post the code at SO to test your site? — guest271314, Aug 18 '17 at 05:56
sorry, if I wasn't clear. I meant I added cors headers so that you won't get the TypeError you referenced. (assuming you tested the code snippet from your console). The issue with the code in question is that I am expecting the res in the final .then to contain the json object so that I can then use to modify the dom. — Alex Montgomery, Aug 18 '17 at 05:57
@AlexMontgomery _"I wasn't clear. I meant I added cors headers so that you won't get the TypeError you referenced. (assuming you tested the code snippet from your console)"_ You still are not being clear. What is the issue with the code at Question? — guest271314, Aug 18 '17 at 05:58
@AlexMontgomery Cannot reproduce _"Instead it is returning an pending promise."_. Can you reproduce what you describe at original Question at stacksnippets, jsfiddle https://jsfiddle.net or plnkr https://plnkr.co? See https://stackoverflow.com/help/mcve — guest271314, Aug 18 '17 at 06:04
is there any other output in the console? Have you tried adding a `.catch` to catch and log any errors ... `.catch(reason => console.error(reason))` ... — Jaromanda X, Aug 18 '17 at 06:35
Now that I try, I cannot reproduce it with actual useful code. It seems to work fine with a res.map. It only causes an issue with console.log. That means it isn't any longer a real problem for me, but I am curious why the returned object would not be available in console.log? When you put the code in the question in your console, did it return an object? or a Promise with undefined PromiseValue? — Alex Montgomery, Aug 18 '17 at 06:35
if you enter `1 + 2` in the console, there's an output, even without using `console.log`, right ... so, that "pending promise" isn't the output by `console.log(res)` it's the as yet unresolved `Promise` returned by `fetch` - the console.log would be output AFTER that — Jaromanda X, Aug 18 '17 at 06:40
@AlexMontgomery See https://stackoverflow.com/help/how-to-ask, https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call/ — guest271314, Aug 18 '17 at 06:41

jfriend00 · Accepted Answer · 2017-08-18T07:24:59.273

First off, in case you did not know this already, anytime you run a line of code directly in the console, the console will print out whatever that line of code evaluates to. If that line of code is a function call or a series of functions calls as in fetch(...).then(...).then(...), then the console will show what that chain of functions returns. It doesn't wait for promises to resolve or callbacks to get called, it just executes that line of code and reports what it returned.

And, fetch().then() or fetch().then().then() returns a promise in the pending state. That's what it does. Then, sometime later when the fetch() operation is done the first promise will complete and it will call its .then() handlers.

But, if you're just looking at what fetch().then() or fetch().then().then() returns in the console, it's always going to be returning an unresolved promise in the pending state because the async operation has not yet completed so that's the return value that the console will show.

You use promises so they will execute their .then() handlers at the appropriate time in the future. So, if you want to see the result of your async operations, you should be logging what is passed to your .then() handlers and then when they are called, you will see the appropriate data logged.

Note: you should also have a .catch() handler at the end of your chain so you will be able to see any errors that happen in your promise chain.

fetch res.json continues to return unresolved promise

1 Answers1