Returning an JSON object from an API call using a function in Javascript

Question

very basic question here (I'm a Javascript neophyte) that I oddly can't seem to find answered. I'm having trouble storing and displaying the result of a function that uses a fetch call. The code below spits out "undefined" in the console; any thoughts on what might be the problem?

 function getApi() { var obj; fetch("https://jsonplaceholder.typicode.com/posts/1").then((res) => res.json()).then((data) => (obj = data)); return obj; } let x = getApi(); console.log(x);

Answer 1

The fetch method is asynchronous, so obj is undefined because your code is going to the next instruction without waiting the fetch. You can simply use async/await method that is a great way to make asynchronous calls because await will wait for the result before going to the next instruction.

 async function getApi() { const response = await fetch("https://jsonplaceholder.typicode.com/posts/1") const obj = await response.json() return obj; } (async() => { let x = await getApi(); console.log(x); })()