API数据获取后无法正确读取对象长度问题排查

你的问题出在最后一个then的写法上：你直接写了console.log(this.lessons.length)，这行代码会立刻执行，根本等不到前面的API请求完成、this.lessons赋值的步骤。因为then方法需要接收一个函数作为参数，你现在传的是console.log执行后的返回值（也就是undefined），相当于这个then没起到等待前一步完成的作用。

另外，依赖this来传递数据也容易出问题，更稳妥的方式是在then里直接返回处理后的数组，让后续的then直接拿到结果。

修正后的代码 #

fetch("https://api.site.com/v1/lessons", requestOptions)
  .then(response => response.json())
  .then(response => {
    // 处理数据并返回新数组
    const processedLessons = response.map(e => ({ id: e.id }));
    this.lessons = processedLessons;
    return processedLessons; // 返回给下一个then
  })
  .then(processedLessons => {
    // 这里拿到的是处理后的数组，直接打印长度
    console.log(processedLessons.length);
  })
  .catch(error => {
    // 捕获请求或处理过程中的错误，方便排查问题
    console.error('请求出错:', error);
  });

关键改动点 #

• 把最后一个then的参数改成函数，确保只有当前面的步骤完成后才执行打印操作
• 在处理数据的then里返回处理后的数组，让后续步骤直接使用这个值，避免依赖this的异步赋值问题
• 添加catch捕获错误，API请求失败时能及时定位问题

你之前类似场景能用，可能是当时this.lessons的初始值或者执行时机刚好巧合，但这种写法本身不严谨，按上面的改法就能正常拿到正确的条目数了。

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