如何确保Fetch API响应完成后填充数组并进行遍历？

嘿，这问题核心是Fetch API是异步操作——JavaScript不会等着它请求完成再往下走，所以你之前的代码都是在请求还没返回数据的时候就执行了后续操作，自然拿不到想要的结果。咱们来一步步解决：

先搞懂为什么之前的代码出问题 #

• 第一段代码里，console.log(userfetched)是同步执行的，这时候Fetch的请求还在后台跑，userfetched还没被填充，所以输出空数组。而且还要注意：你用userfetched.push(user)其实是把整个用户数组作为单个元素塞进去了，正确的应该是展开数组元素再push。
• 第二段代码里，console.log('end')是同步代码，会先于异步的.then()回调执行，所以先看到'end'，等请求完成后才会输出用户数据。

解决方案1：用.then()链式调用处理 #

把遍历数组的逻辑放到第二个.then()里面，确保数据已经返回并填充到数组后再执行：

const userfetched = [];
fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(users => {
    // 展开数组，把每个用户单独加入userfetched
    userfetched.push(...users);
    // 现在可以安全遍历数组了
    userfetched.forEach(user => {
      console.log(`用户名：${user.name}，邮箱：${user.email}`);
    });
  });

解决方案2：用async/await（更易读的同步风格） #

这种语法让异步代码看起来像同步代码，可读性更强：

async function fetchAndProcessUsers() {
  const userfetched = [];
  // 等待Fetch请求完成拿到响应
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  // 等待响应解析成JSON
  const users = await response.json();
  // 填充数组
  userfetched.push(...users);
  // 遍历处理数组
  userfetched.forEach(user => {
    console.log(`用户ID：${user.id}，地址：${user.address.city}`);
  });
}

// 调用这个异步函数
fetchAndProcessUsers();

两种方法都能确保你在数组被正确填充后再进行遍历操作，选哪种看你个人习惯——async/await现在是更流行的写法，代码更直观。

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