JavaScript中如何通过API调用返回的数据创建新对象

错误原因 #

• 核心逻辑偏差：你存储接口地址的urls数组本身不携带任何业务字段，所有接口返回的业务数据都存放在Promise.all返回的response数组中，现有代码错误地从urls变量读取transfers、users等业务属性，自然会抛出未定义错误
• 未声明变量引用：构造originUserName时使用了从未定义的data变量，也会触发运行时报错
• 结果顺序未适配：Promise.all返回的数组顺序和你传入的urls请求顺序完全一致，需要按你的实际接口排列顺序从response中取出对应业务数据

修复后代码示例 #

以下示例默认你的urls数组顺序为「用户信息接口、转账信息接口、目标账户接口」，如果你的接口顺序不同请自行调整下标：

const urls = [/* 按顺序填写：用户信息接口、转账信息接口、目标账户接口 */]

const fetchData = async() => {
  try {
    const response = await Promise.all(
      urls.map(url => fetch(url).then(res => res.json()))
    )
    // 按urls顺序取出对应接口返回数据
    const userData = response[0]
    const transferData = response[1]
    const targetAccountData = response[2]
    
    if (transferData.status !== 'failed') {
      return {
        originUserName: userData.firstName + userData.lastName,
        targetUserName: targetAccountData + userData.firstName + userData.lastName,
        amount: transferData.amount,
        description: transferData.description,
        likesCount: userData.likes
      };
    }
  } catch (error) {
    console.log("Error", error)
  }
}

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