在 java 脚本中保存来自 fetch 调用的承诺

Question

每当我尝试进行 fetch get api 调用时，我都无法将其结果保存在我的其他 JavaScript 变量中。要么什么都没发生，要么我得到类似“[object Promise]”的东西。在这个特定的调用 and/or 代码中我到底做错了什么？

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>`

我有一个 main.js 文件，我在其中调用它：

main.js

document.writeln(UsersWidget);

这是我的 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>

Answer 1

您忘记了 await Promise 的结果。即使您没有明确地 return 来自 githubUsers 的 Promise，return 值也是 Promise，因为它是一个 async 函数：

let allUsers = await githubUsers()

如果你不能使用 await 因为不在 async 函数的上下文中，写这个：

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

在main.js中：

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

Answer 2

您需要一个包含在 IIFE 中的 await as

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

我们想等待 githubUsers 之后才能填充 UsersWidget，并且由于此调用未包含在上下文函数中，因此您需要一个环绕的 IIFE

在 java 脚本中保存来自 fetch 调用的承诺

Saving promises from fetch call in java script

javascript

fetch