How do I async/await an fetch response?-CodePudding

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.com/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.com/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

CodePudding user response：

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.com/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.com/manifest_desktop_us.json';
var jobj = abc(url).then((value) => console.log(value));

CodePudding user response：

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.com/https://www.yahoo.com/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.

CodePudding user response：

You can use then.


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

const getApi = async () => {

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

}

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