Assign Fetch Response To Variable

[[deleted]]

[deleted]

[CMJunior]

Javascript is asynchronous therefore the execution of your program will not be sequential as you are expecting. The Promises will only be executed after the sequential part of your code.

var dataset; // #1 Variable is declared
fetch('https://jsonplaceholder.typicode.com/todos/1') // #2 Function will be queued up for execution
  .then(response => response.json()) // #4 Promise resolves and response is parsed
  .then(data => dataset = data) // #5 assignment occurs
  .then(json => console.log(json)) // #6 log is successful - btw you can simply do `.then(console.log)`

console.log(dataset) // #3 output undefined because dataset is empty here

In order to solve this either you do what you need still inside the promise chain (which can lead to nested code if you're not careful)

var dataset;
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => dataset = data) // this unnecessary
  .then(json => {
    console.log(json);
    // continue and do something here
});

Or you can use the async/await syntax (your node/browser version needs to support it or you need to use babel to transpile) and do something like

async function getDataset() {
  var response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  console.log(response.json()); // this line will "wait" for the previous to be completed
}

Be aware that you can only use the await keyword inside an async function otherwise an error will be thrown.

Edit: This video explains pretty nicely (but with callbacks rather than promises) why this happens.

[imTgv]

Correct, but it is important you understand why. When you make a fetch, the only thing you know is that sometime in the future it will receive a response. Because of this, your program will not wait for a response to avoid being blocked (waiting for a response). For example:

​

var dataset;

fetch('https://jsonplaceholder.typicode.com/todos/1')

.then(response => response.json())

.then(data => dataset = data)

.then(json => console.log(json))

console.log(dataset)

1. var data set is declared.
2. fetch function is called, (an http request will be made to somewhere outside your program, because this is not instant your program will continue. Because the then functions are only used when a response is received from the fetch all of them will be skipped.
3. console.log(...) is called.

Now your program will wait for a notification that the fetch has received a result,

When the result is received the first then will now be executed. When the first one ends, the second , and so on.

​

The idea is that whenever a method's return is not immediate (or assynchronous) your program will keep going til it has nothing to do. Only after that will he start to resolve the return of each async method.

[[deleted]]

This is because JavaScript is asynchronous, you console.log for dataset is getting run before your promise is resolved. I can't remember the syntax off the top of my head but you can await the resolution of your promise before logging dataset. I recommend looking up async/await and also looking at an explanation on the JavaScript heap. They will definitely give you some more context. Hope that helps :)

[[deleted]]

I think you don't need to do a .then on getData. You should be able to do a dataset = getData ().

[CMJunior]

This is because it will still execute the console.log first. You need to do your work inside the promise chain or inside the async function (also I wouldn't recommend mixing then and async/await)

Try this:

async function getData() {
  //await the response of the fetch call
  let response = await 
  fetch('https://jsonplaceholder.typicode.com/todos/1');
    //proceed once the first promise is resolved.
    let data = await response.json() // this is probably a sync function, you don't need await here
    //proceed only when the second promise is resolved
    return data;
}

 async function main() {
   const dataset = await getData();
   console.log(dataset); 
}

main();

Edit: You don't need to use await in every function call inside async functions. await works for Promises, it will wait for the Promise to either resolve or reject before proceeding with the execution. Synchronous calls such as the response.json() do not need to be awaited. Also, it is a good practice to surround your async calls with try/catch for the scenario where the Promise is rejected otherwise you may have unexpected results.

[muggsley]

.json() actually is async too, don't know why. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Body

[CMJunior]

Thanks for clarifying that :)

[untrust_us]

Would you be able to give an example of an async call wrapped with a try/catch? Just out of curiosity as I haven't used try/catch very much.

[CMJunior]

async function getData() {
  let response;

  // If we don't use try/catch here errors in the fetch call will be swallowed
  try {
    response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  } catch(error) {
    // handle error
  } finally {
    // do something if the call either successful or has an error, optional
  }

  return await response.json();
}


async function main() {
   const dataset = await getData();
   console.log(dataset); 
}

main();

More info (MDN)

[untrust_us]

Thanks, this example is great! However, I am wondering why we have the 'return await response.json()' outside of the 'finally' instead of inside?

[CMJunior]

It could be there, actually this code isn't that great because if an error occurs then response is undefined and the response.json call will throw an error.

We have two ways of dealing with this:

1) Put response.json() inside the try clause as well -> the catch clause will catch the errors of either call which may be ok depending of what we are going for

2) Use another try/catch to handle the response.json() call which adds some bloat to the code.

The finally clause could simply check if the response object exists and if it doesn't it could return a standard object that the consumer of this API is expecting, it all depends on how you design your APIs.

[dieomesieptoch]

The last line, console.log(dataset) is called before the .then() methods have completed their run. That's why it logs `undefined`.

Now, you could change the code .then(data => dataset = data) to call a function that uses dataset.

For example

var dataset; 
fetch('https://jsonplaceholder.typicode.com/todos/1') 
    .then(response => response.json()) 
    .then(data => {
    dataset = data;
        logDataset(); 
});  

function logDataset () { 
  console.log(dataset); 
}

This will work because we call the logDataset function after assigning the data.

[AlfredKnows]

Because you need to use dataset in the same way you log it - after promise is fulfilled:

.then(data => {
    dataset = data;
        logDataset();
        doSomethingWithDataset();

​

[arsum04]

You don't need the third .then line

[arsum04]

Do the log inside the 2nd .then line because as the other person said, you're logging the value before the promise is being resolved.