如何处理async函数返回的Promise结果，对其中的用户数组执行map操作

问题根源 #

listUsers是async异步函数，执行后返回的是Promise 实例，不是接口返回的实际数据。你在控制台看到的Users数组是Promise resolve后的预览值，同步执行代码时无法直接读取Promise内部的返回值，必须等待Promise状态变更为已完成后才能拿到数据操作。

实现方案 #

方案1：使用async/await语法（推荐）

在异步上下文内通过await等待接口返回结果后再执行map操作：

// 封装用户处理逻辑
const processUserList = async () => {
  try {
    // 等待接口请求完成，拿到实际返回数据
    const apiResult = await listUsers()
    // 对Users数组执行map操作，可自定义处理逻辑
    const processedUsers = apiResult.Users.map(user => {
      // 示例：仅提取用户名和用户创建时间
      return {
        userName: user.Username,
        createTime: user.UserCreateDate
      }
    })
    // 处理后的结果可在当前作用域内正常使用
    console.log(processedUsers)
    return processedUsers
  } catch (err) {
    // 捕获接口请求、鉴权等异常
    console.error('用户列表处理失败：', err)
  }
}

// 调用处理函数
processUserList()

方案2：使用.then链式调用

如果没有可用的异步上下文，直接通过Promise的then方法接收返回结果：

listUsers()
  .then(apiResult => {
    // 拿到结果后执行map操作
    const processedUsers = apiResult.Users.map(user => {
      // 自定义你的map逻辑
      return user.Username
    })
    console.log(processedUsers)
    // 后续业务逻辑都可写在then回调内
  })
  .catch(err => {
    // 异常捕获
    console.error('请求用户列表失败：', err)
  })

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