为何调用fetch获取的数组无法通过users[0]访问首元素？

• async函数的返回值是Promise对象，不是直接的函数内部return的数组。你调用getUsers()后，变量users存的是还没完成的Promise，不是最终的用户数组，所以直接访问users[0]会得到undefined。
• 浏览器控制台显示数组是因为控制台会自动展开Promise的最终结果，但这是异步完成后的状态，同步执行的console.log(users[0])早于Promise完成的时机。

方法一：用.then()处理Promise结果 #

把后续逻辑放在Promise的then回调里，确保在数组返回后再执行：

async function getUsers() {
  const response = await fetch("/api/users");
  const users = await response.json();
  return users;
}

getUsers().then(users => {
  console.log(users[0]); // 正常访问第一个元素
  console.log(users);
});

方法二：用async/await包裹调用逻辑 #

await必须在async函数内部使用，所以把调用代码放到一个async函数里：

async function getUsers() {
  const response = await fetch("/api/users");
  const users = await response.json();
  return users;
}

async function main() {
  let users = await getUsers();
  console.log(users[0]);
  console.log(users);
}

main();

内容的提问来源于stack exchange，提问作者evggenn