I want to use await to save the response to a variable. I need to store that response in a variable and use it in the next code flow. I don't want to store and use variables only inside function braces. In the code below, only one console.log is written, but many events exist. I don't want to use fetch and then. I want to solve it using async/await, but everything I do is wrong. What did I do wrong?

Try 1

Run => Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

var resp = await fetch(`.json`);  
var jobj = await resp.json();  
var display = jobj.display;  
console.log(display); //I need display value

Try 2

Run => undefined

async function abc(url) {
  var resp = await fetch(url);
  var jobj = await resp.json();
  return jobj;
}
var url = '.json';
var jobj = abc(url);
//var jobj = async() => await abc(url); //undefined
var display = jobj.display;  
console.log(display); //I need display value

I want to use await to save the response to a variable. I need to store that response in a variable and use it in the next code flow. I don't want to store and use variables only inside function braces. In the code below, only one console.log is written, but many events exist. I don't want to use fetch and then. I want to solve it using async/await, but everything I do is wrong. What did I do wrong?

Try 1

Run => Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

var resp = await fetch(`https://www.yahoo./manifest_desktop_us.json`);  
var jobj = await resp.json();  
var display = jobj.display;  
console.log(display); //I need display value

Try 2

Run => undefined

async function abc(url) {
  var resp = await fetch(url);
  var jobj = await resp.json();
  return jobj;
}
var url = 'https://www.yahoo./manifest_desktop_us.json';
var jobj = abc(url);
//var jobj = async() => await abc(url); //undefined
var display = jobj.display;  
console.log(display); //I need display value

• javascript
• asynchronous
• fetch-api

Share Improve this question Follow edited Mar 27, 2023 at 20:59 isherwood 61.2k1616 gold badges121121 silver badges170170 bronze badges asked Mar 20, 2022 at 6:48 hoxyhoxy 2111 gold badge11 silver badge33 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You need to move the whole logic related to async operation in an async function.
You can use an anonymous async function for that:

(async () => {
    var resp = await fetch(`https://www.yahoo./manifest_desktop_us.json`);  
    var jobj = await resp.json();  
    var display = jobj.display;  
    console.log(display);
})();

Alternatively, since an async function returns a Promise you can get the value in a then call as well:

async function abc(url) {
  var resp = await fetch(url);
  var jobj = await resp.json();
  return jobj;
}
var url = 'https://www.yahoo./manifest_desktop_us.json';
var jobj = abc(url).then((value) => console.log(value));

Your 1st try is very much close to get it to work, the error Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules means await can only be used within an async function, so you need to wrap it

(async function(){
    var resp = await fetch(`https://cors- 
 anywhere.herokuapp./https://www.yahoo./manifest_desktop_us.json`);  
    var jobj = await resp.json();  
    var display = jobj.display;  
    console.log(display); // logs "standalone" from API
})();

In addition, you also need to bypass cors, for the sake of demonstration, I've added cors URL, but in your production app you must handle it in the global HTTP request instance or have your own backend URL.

You can use then.

const [data, setData] = useState({})

const getApi = async () => {

const resp = await fetch(`https://www.yahoo./manifest_desktop_us.json`)  
return resp

}

getApi().then((resp) => setData(resp.json))