12

So my code here return a Promise and since I'm using then syntax I don't know why that happens :-??

fetch('someurltoAJsonFile.json')
  .then(function(response) {
    console.log(response.json());});
VLAZ
  • 26,331
  • 9
  • 49
  • 67
C. Cristi
  • 569
  • 1
  • 7
  • 21

4 Answers4

31

response.json() in node-fetch library also returns a promise, instead try 

fetch('someurltoAJsonFile.json')
  .then(response => response.json())
  .then(data => {
    console.log(data)
  });

you can look up more details about it here

EDIT:

It seems that the returned response wasn't in the valid json, so for the sake of completeness here is a code for text

fetch('someurltoAJsonFile.json')
  .then(response => response.text())
  .then(data => {
    console.log(data)
  });
Krzysztof Krzeszewski
  • 5,912
  • 2
  • 17
  • 30
  • Hello, it gives me SyntaxError: JSON.parse: unexpected character at line 7 column 1 of the JSON data – C. Cristi Feb 12 '19 at 18:32
  • 1
    it means that the response cannot be parsed, it is not a valid json format, you can try `response.text()` instead of `response.json()`, any chance you could provide more code, or at least an url of the asset you are trying to fetch? – Krzysztof Krzeszewski Feb 12 '19 at 18:33
  • Oh..god! I never expected response.json() to be promise itself. This is so non-intuitive! Thanks for the post. – Ravindhran Sankar Jun 06 '20 at 07:55
  • @RavindhranSankar some data can be retrieved before the entire request body has been sent, among other things you can get access to stuff like headers and status codes before you have access to the full body data, so for optimization purposes you can parse those before the `response.json()` was fully resolved, as such fetch function resolves as soon as part of the data is available – Krzysztof Krzeszewski Jun 06 '20 at 10:20
13

The function given as then parameter will be executed asynchronously (sometime in the future when your server returns a response), but then itself return Promise immediately (in synchronous way) by its definition

If you want to code looks less nested (more as synchronous code) you can use await but you must opaque whole code with async function 

async function load() 
{
  let response = await fetch('someurltoAJsonFile.json');
  let data = await response.json();
  console.log(data);
}
Kamil Kiełczewski
  • 85,173
  • 29
  • 368
  • 345
  • 2
    still promise on pending – C. Cristi Feb 12 '19 at 18:33
  • @C.Cristi above code not show how to avoid promises but how to use async/await and create less nested code which looks more synchronously (which is visible especially when you send more requests) - but in fact it runs asynchronously – Kamil Kiełczewski Feb 12 '19 at 18:35
0

Debating whether or not this qualifies as an answer, but I ran into a similar situation today that led me to this question even though my problem ended up being environment related.

If you are seeing promise pending and your code is correct and you spend way too much time trying to figure out why the console.log isn't showing, double check that you have "Info" turned on in chrome's dev tools. I only had warnings turned on so I wasn't seeing my console.log.

Matt
  • 5,315
  • 1
  • 30
  • 57
0

This code works and show a good way to make a fetch and get the promise without the pending problem.

Run this code in your server if you have cors problem download this extension in google chrome "Allow CORS: Access-Control-Allow-Origin"

async function invoices() 
{
  let response = await fetch('https://blockchain.info/latestblock?utm_medium=referral&utm_campaign=ZEEF&utm_source=https%3A%2F%2Fjson-datasets.zeef.com%2Fjdorfman');
  let data = await response.json();
  console.log(data);
  return data;
}

invoices().then(data => {
 console.log(data);
});
osiris rodriguez
  • 378
  • 3
  • 7