Axios请求后为数组内对象新增属性失效问题求助

问题原因 #

两次写法的核心问题都是异步任务未完成就提前返回接口响应，具体问题拆分：

• 第一版代码没有对异步请求做任何等待控制：resp.map里的axios.post是异步执行的，代码会直接跳过请求逻辑走到res.json，此时所有接口请求还没返回，自然没法给mes对象新增nombre属性。
• 第二版代码虽然用了Promise.all，但没有加await关键字等待所有异步任务执行完毕，res.json还是会在所有axios.post请求完成前执行，所以属性还是没加上。
• 额外问题：你混用了数据库查询的await和回调写法，这里的await是无效的，应该统一用Promise写法处理数据库查询。

修正代码 #

userCtrl.getContacts = async (req,res) => {
  try {
    // 统一用await拿数据库查询结果，不混用回调
    const resp = await db.query('SELECT * FROM mensajes WHERE message_id IN (SELECT MAX(message_id) FROM mensajes GROUP BY message_from) ORDER BY timestamp DESC');
    
    // 加await等待所有异步请求、属性赋值完成
    await Promise.all(resp.map(async mes => {
      const from = mes.message_from;
      const num = from.replace(/\D/g,"");
      const num2 = num.substr(3);
      mes.number = num2;
      const uri = 'http://localhost:3001/message/getUserInfo';
      const form = { phone: num2 };
      const raro = await axios.post(uri, form);
      mes.nombre = raro.data.nombre;
    }));

    // 所有属性赋值完成后再返回响应
    res.json({"status":"ok","msg":"Listado de contactos con último mensaje","info":resp});
  } catch (err) {
    console.log(err);
    res.json({"status":"error","msg":"数据库或接口请求异常"});
  }
}

userCtrl.getUserInfo = async (req,res) => {
  try {
    const phone = req.body.phone;
    const resp = await db2.query('SELECT nombre FROM usuarios WHERE movil like ?',[phone]);
    if(resp.length > 0){
      res.json({"nombre":resp[0].nombre});
    } else {
      res.json({"nombre":"No"});
    }
  } catch (err) {
    console.log(err);
    res.status(500).json({"status":"error","msg":"数据库查询异常"});
  }
}

特殊情况处理：如果修改完依然无法新增属性，可能是数据库查询返回的行对象是冻结/不可扩展的，你可以在map里先把对象转为普通可修改对象再操作：

const arr = await Promise.all(resp.map(async mes => {
  const newMes = {...mes}; // 转为普通可修改对象
  const from = newMes.message_from;
  const num = from.replace(/\D/g,"");
  const num2 = num.substr(3);
  newMes.number = num2;
  const uri = 'http://localhost:3001/message/getUserInfo';
  const form = { phone: num2 };
  const raro = await axios.post(uri, form);
  newMes.nombre = raro.data.nombre;
  return newMes; // 返回处理后的对象
}));
// 直接返回处理好的arr数组即可
res.json({"status":"ok","msg":"Listado de contactos con último mensaje","info":arr});

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