Vue.js中如何从API返回的Promise中提取数据（如条目数量）

你的users.list()返回的是一个Promise对象，直接console.log只能看到Promise的状态，要获取里面的数据，必须等Promise完成后再处理，有两种常用方式：

方式一：使用.then()链式调用 #

直接在Promise后挂载.then()，在回调函数里处理返回的数据：

users.list().then(userData => {
  // 获取数据条目的数量
  const itemCount = userData.data.length;
  console.log('数据条目数量：', itemCount);
  
  // 这里可以做其他数据操作，比如遍历用户列表
  userData.data.forEach(user => {
    console.log('用户信息：', user);
  });
});

方式二：使用async/await语法 #

在异步函数中用await等待Promise完成，再处理数据：

async function handleUserData() {
  const userData = await users.list();
  // 获取数据条目的数量
  const itemCount = userData.data.length;
  console.log('数据条目数量：', itemCount);
}
// 调用异步函数
handleUserData();

补充说明 #

你的users.list()已经通过.then(r => r.data)把API响应的核心数据返回了，所以最终拿到的userData就是包含data数组的对象，直接访问userData.data就能拿到用户列表数组，通过length属性即可获取条目数量。

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