loadData() 返回空数组

Question

我正在尝试将一个对象数组返回给一个函数，并查看调试器，它看起来只是返回一个空数组。

这是我希望使用的功能：

// load from json file
  loadData(filepath) {
    let rooms = [];

    fetch(filepath)
      .then(
        res => res.json()
      )
      .then(function (data) {
        // console.log(data);
        for (let i = 0; i < data.rooms.length; i++) {
          rooms.push(data.rooms[i]);
        }
      });
    return rooms;
  }

我进入调试器，我看到 data.rooms 中的房间被推送到我的本地房间对象，但是当我回到应该使用这个房间数据的 init() 函数时：

let rooms = this.loadData(this.datapath); // TODO: make games load from json data

    for (let i = 0; i < rooms.length; i++) {
      this.addRoom(rooms[i].name, rooms[i].getText, rooms[i].prompts, rooms[i].requirements);
    }

看起来它传递了一个空数组。是否存在范围界定问题或我遗漏了什么？我对 fetch/promises/JSON 不是很有经验。

很高兴提供任何可能有用的进一步信息。谢谢！

Answer 1

试试这个，如果不起作用，请告诉我。

// load from json file
async function call() {
  const loadData = async filepath => {
    let rooms = [];

    return await fetch(filepath)
      .then(res => res.json())
      .then(async data => {
        rooms = await [...data];
        return rooms;
      });
  };

  let x = await loadData("https://jsonplaceholder.typicode.com/posts");
  console.log("TEST: ", x);
}
call();

Answer 2

问题是您的局部变量 rooms 将在异步获取完成之前返回。

您可以简单地等待 fetch 语句并使函数异步：

async loadData(filepath) {
  let rooms = [];

  const response = await fetch(filepath);
  const data = await response.json();

  console.log(data);

  for (let i = 0; i < data.rooms.length; i++) {
      rooms.push(data.rooms[i]);
  }
  return rooms;
}

let rooms = await this.loadData(this.datapath);