获取随机用户 API

Question

我正在尝试使用随机用户 API 来获取一些数据，但看到“获取失败”错误。有人可以为我指出如何解决这个问题的正确方向吗？ TIA :)

async function getUsers() {
  let users = await fetch('https://randomuser.me/api/?results=2');
  let data = await users.json();
}

await getUsers();

错误：

GET https://randomuser.me/api/?results=5 net::ERR_FAILED
Uncaught (in promise) TypeError: Failed to fetch

承诺：

Promise {<pending>}__proto__: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: TypeError: Failed to fetch

更新：原来我是在一个新的标签页/空白页中测试这个，它没有显示完整的错误： “CORS 策略已阻止从源 'null' 获取 '...' 的访问权限：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。如果不透明的响应满足您的需求，请设置请求模式为 'no-cors' 以获取禁用 CORS 的资源。” 我现在安装了一个 Chrome 扩展来解决这个问题，尽管我确信可能有更好/更永久的方法来解决这个问题，我可能会在改天尝试！

Answer 1

你可以使用.then()

function getUsers() {
    fetch("https://randomuser.me/api/?results=2")
      .then((results) => {
        return results.json();
      })
      .then((data) => {
        console.log(data);
        // Access your data here
      });
  }
  
getUsers();

你也可以将它全部封装在一个异步函数中，因为 await 必须在一个异步函数中使用：

(async function () {
  const users = await fetch("https://randomuser.me/api/?results=2")
    .then((response) => response.json())
    .then((data) => {
      return data;
    });

  console.log({ users });
})();

或者使用你原来的语法：

async function getUsers() {
  const users = await fetch("https://randomuser.me/api/?results=2");
  return users.json();
}

getUsers().then((data) => console.log(data));

Answer 2

你必须等待你的异步函数来解决这样的承诺。

 async function getUsers() {
  let users = await fetch('https://randomuser.me/api/?results=2');
  let data = await users.json();
}

await getUsers();