Node.js使用回调查询订单后无法将菜品图片URL添加到结果数组

问题根源 #

你的问题本质是异步回调时序错误+全局变量污染，getDishesByDishIds是异步执行的方法，你在同步循环中触发请求后，不会等待回调返回结果就直接执行了res.json返回响应，等你拿到图片URL的时候，早就已经把响应返回给前端了，所以Url字段一直是空或者错误值。另外你大量变量没有加let/const声明，变成全局变量，循环过程中会互相覆盖，进一步导致结果异常。

修复方案 #

我们可以先把回调方法包装成Promise，用async/await来控制异步流程，逻辑更清晰也更容易维护，修复后的代码如下：

// 先把两个回调方法包装成Promise，方便用async/await
const util = require('util');
const getAllOrdersByUserIdAsync = util.promisify(getAllOrdersByUserId);
const getDishesByDishIdsAsync = util.promisify(getDishesByDishIds);

myOrders: async (req, res) => {
  try {
    const userId = req.body.userId;
    const orderStatus = 2;
    const results = await getAllOrdersByUserIdAsync(userId, orderStatus);
    
    if (!results) {
      return res.status(404).json({
        success: 0,
        message: "Record not found",
      });
    }

    const myOrderArray = [];
    // 遍历每个订单
    for (let i = 0; i < results.length; i++) {
      const orderItem = results[i];
      const myOrder = {
        DishOrderId: orderItem.DishOrderId,
        BagId: orderItem.BagId,
        DateCreated: orderItem.DateCreated,
        Bags: JSON.parse(orderItem.Bags)
      };

      // 收集当前订单所有菜品ID，只查一次数据库
      const dishIds = myOrder.Bags.map(dish => dish.DishId);
      const dishResults = await getDishesByDishIdsAsync(dishIds);

      // 提取所有图片URL
      const dishUrls = dishResults
        .filter(item => item.DishImageUrl1) // 过滤掉没有图片的记录
        .map(item => item.DishImageUrl1);
      myOrder.Url = dishUrls;

      myOrderArray.push(myOrder);
    }

    // 所有异步请求都完成再返回结果
    return res.json({
      success: 1,
      bag: myOrderArray
    });

  } catch (error) {
    console.log(error);
    return res.status(500).json({
      success: 0,
      message: "Some other error",
      error: error,
    });
  }
}

如果你的运行环境不支持async/await，也可以用计数器控制回调时序：每完成一个订单的图片查询就给计数器+1，等计数器等于订单总数的时候再执行res.json返回结果即可。

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