How to store fetch response in javascript variable

Question

sorry for the basic question. I was trying using fetch to get data from api and want to store that response into a javascript variable but its not working as I have expected My code-

async function fun() {
    var a = "initial";
    fetch('https://jsonplaceholder.typicode.com/todos/1')
        .then(res => res.json())
        .then(data => {
            a = data;
            console.log(a);
        })

    await console.log("Response => ", a);
}

Output - Response => initial

What is the correct way of doing this.

Andrew · Accepted Answer · 2021-12-14 14:01:18Z

6

You are doing more than you need to. Your fetch call should be returning the promise. Then when you want to access the data, you await the fun call, and can read the response

async function fun() {
  return fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());
}

const data  = await fun();

Alternatively, if you wanted to just use async/await you could do something like

const fun = async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  return response.json()
}

await fun();

edited Dec 14, 2021 at 14:01

answered Dec 14, 2021 at 13:55

Andrew

1986 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

realFishSam Over a year ago

Both of these give me the error: SyntaxError: await is only valid in async functions and the top level bodies of modules

Andrew Over a year ago

You probably have something else going on there. As you can see, both of these functions are using the async keyword. Are you forgetting that part?

Charles Kasasira Over a year ago

The await that is outside the function, still gives a SyntaxError.

Caulic · Accepted Answer · 2021-12-14 13:52:16Z

5

You may need to add await before fetch.

async function fun() {
  var a = "initial";
  await fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(res => res.json())
    .then(data => {
      a = data;
      console.log(a);
    })

  console.log("Response => ", a);
}

answered Dec 14, 2021 at 13:52

Caulic

964 bronze badges

1 Comment

Thomas Over a year ago

Although technically correct, don't do this. This ain't good code. At least get rid of that nasty second then. like var a = await fetch(...).then(res => res.json());

Kalyan Sundar · Accepted Answer · 2023-08-24 18:58:12Z

0

let darth = fetch('https://jsonplaceholder.typicode.com/users')
let java = []
darth.then(res => res.json()).then((log) => java.push(log))
const user = java.flat().map(res => res)

This works on developer console on the chrome but not on visual studio code. Strange. I was able to fetch the data and put it into a const

answered Aug 24, 2023 at 18:58

Kalyan Sundar

336 bronze badges

Collectives™ on Stack Overflow

How to store fetch response in javascript variable

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related