Saving promises from fetch call in java script

Question

Whenever I try making fetch get api calls I am not able to save the result of it in my other JavaScript variables. either nothing happens or I get something like '[object Promise]'. What exactly am I doing wrong in this specific call and/or code?

users.js:

async function githubUsers() {
  let response = await fetch('https://api.github.com/users')
  let users = await response.json()
  console.log(users)
  return users
}

githubUsers()
let allUsers= githubUsers()
let UsersWidget = `
<div>
  <div>
    <p>Current Online users: ${allUsers}</p>
  </div>
</div>`

I have a main.js file where I call upon it:

main.js

document.writeln(UsersWidget);

and here is my index.html

<!DOCTYPE html>
<html>
<head>
    <title>Github users</title>
    <link href="css/tailwind.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/users.js"></script>

</head>
<body class="bg-blue-500">
test
</body>
</html>

Guerric P · Accepted Answer · 2021-08-20T18:18:32.840

1

You forgot to await the result of that Promise. Even if you dont explicitly return a Promise from githubUsers the return value is a Promise because it's an async function:

let allUsers = await githubUsers()

If you can't use await because not in the context of an async function, write this:

const allUsers = githubUsers().then(users => {
  return `
  <div>
    <div>
      <p>Current Online users: ${users}</p>
    </div>
  </div>`
});

In main.js:

allUsers.then(x => document.writeln(x));

edited Aug 20 '21 at 18:18

answered Aug 20 '21 at 14:38

Guerric P

30,447
6
48
86

when doing that i get the following error: await is only valid in async functions and the top level bodies of modules – Otorrinolaringologista -man Aug 20 '21 at 14:40
it probably works but I believe the problem is somewhere else since I am still getting the same errors. – Otorrinolaringologista -man Aug 20 '21 at 14:58
@Otorrinolaringologista-man you have to put all of the code that uses `UsersWidget` in place of the comment – Guerric P Aug 20 '21 at 15:01
that is all the code. i just want to show the list of gihub users – Otorrinolaringologista -man Aug 20 '21 at 15:06
Then you probably have something like `element.innerHTML = UsersWidget` – Guerric P Aug 20 '21 at 15:07
i do render them on a main.js file using document.writeln(WeatherWidget); – Otorrinolaringologista -man Aug 20 '21 at 15:08
That code should also be adapted to handle `Promises`. I'd have to see the full code to help you more. – Guerric P Aug 20 '21 at 15:13
Ill update the op – Otorrinolaringologista -man Aug 20 '21 at 15:14
op updated with a little more info. that's is basically all the code so far. – Otorrinolaringologista -man Aug 20 '21 at 15:20
@Otorrinolaringologista-man please take a look at my edit – Guerric P Aug 20 '21 at 15:26
i am getting the error: "TypeError: Illegal invocation" now – Otorrinolaringologista -man Aug 20 '21 at 15:47
OK that was a last detail missing, please check my last edit – Guerric P Aug 20 '21 at 18:18

Saksham · Answer 2 · 2021-08-20T14:43:03.783

1

You need an await enclosed in an IIFE as

(async () => {
    let allUsers = await githubUsers()
    let UsersWidget = `
    <div>
      <div>
        <p>Current Online users: ${allUsers}</p>
      </div>
    </div>`
})();

We want to wait for githubUsers before we can populate UsersWidget and as this invocation is not enclosed inside a context function, you need a surrounding IIFE

edited Aug 20 '21 at 14:43

answered Aug 20 '21 at 14:39

Saksham

9,037
7
45
73

when doing that i get the following error: await is only valid in async functions and the top level bodies of modules – Otorrinolaringologista -man Aug 20 '21 at 14:40

Saving promises from fetch call in java script

2 Answers2