使用While循环的Axios Async/Await函数返回undefined结果问题

用Axios从API获取数据，流程为先获取token，再凭借该token发起请求。由于接口有返回数据量限制，需要通过while循环分页获取所有数据并存到空数组中，但结果里大量是undefined。查资料得知这类问题多因未返回数据导致，但在while循环场景下，该在哪里返回数据？

问题代码 #

const getDailySales = async (req, res) => {
    try {
      const res_token = await axios.post(
        `https://cysms.wuuxiang.com/api/auth/accesstoken?appid=${process.env.TCSL_APPID}&accessid=${process.env.TCSL_ACCESSID}&response_type=token`
      );
      const token = res_token.data.access_token;

      var list = [];
      var pageTotal = true;
      var pageNo = 1;

      while (pageTotal) {
        var salesData = await axios.post(
          `https://cysms.wuuxiang.com/api/datatransfer/getserialdata?centerId=${process.env.TCSL_CENTERID}&settleDate=2022-09-30&pageNo=${pageNo}&pageSize=20&shopId=12345`,
          {},
          {
            headers: {
              access_token: `${token}`,
              accessid: `${process.env.TCSL_ACCESSID}`,
              granttype: "client",
            },
          }
        );
        list.push(salesData);
        console.log(salesData.data.data.billList.shop_name);
        if (salesData.data.data.pageInfo.pageTotal !== pageNo) {
          pageNo += 1;
        } else {
          pageTotal = false;
        }
      }
    } catch (error) {
      console.log(error);
    }
  };

问题分析与修复方案 #

• Axios请求参数错位：post请求多传了一个空对象{}，Axios.post的参数顺序是url, data, config，这个空对象占据了data位置，导致headers配置被错误传入，接口可能返回异常数据，进而出现undefined。直接去掉空对象，把headers作为第三个参数传入。
• 数据存储逻辑错误：当前把整个Axios响应对象salesDatapush到数组，而非实际需要的业务数据billList，后续访问自然会出现undefined。应提取salesData.data.data.billList，用扩展运算符展开后push，避免数组嵌套。
• 循环终止条件逻辑反转：原代码判断pageTotal !== pageNo时翻页，会导致提前终止或无限循环。正确逻辑是当前页码小于总页数时继续翻页，否则终止。
• 未返回结果给客户端：函数没有把收集到的list返回给请求方，需在循环结束后添加res.status(200).json(list)。
• 错误处理不完善：catch块仅打印错误，未给客户端返回错误响应，应添加错误状态码和信息。

修复后的代码 #

const getDailySales = async (req, res) => {
  try {
    // 获取访问token
    const res_token = await axios.post(
      `https://cysms.wuuxiang.com/api/auth/accesstoken?appid=${process.env.TCSL_APPID}&accessid=${process.env.TCSL_ACCESSID}&response_type=token`
    );
    const token = res_token.data.access_token;

    const list = [];
    let pageNo = 1;
    let totalPages;

    while (true) {
      // 发起分页数据请求，修正Axios参数顺序
      const salesData = await axios.post(
        `https://cysms.wuuxiang.com/api/datatransfer/getserialdata?centerId=${process.env.TCSL_CENTERID}&settleDate=2022-09-30&pageNo=${pageNo}&pageSize=20&shopId=12345`,
        {
          headers: {
            access_token: token,
            accessid: process.env.TCSL_ACCESSID,
            granttype: "client",
          },
        }
      );

      const { billList, pageInfo } = salesData.data.data;
      // 校验数据存在性，避免推入undefined
      if (billList && billList.length > 0) {
        list.push(...billList);
      }

      // 首次请求时获取总页数
      if (!totalPages) {
        totalPages = pageInfo.pageTotal;
      }

      // 当前页码等于总页数时终止循环
      if (pageNo === totalPages) {
        break;
      }
      pageNo++;
    }

    // 将收集到的所有数据返回给客户端
    res.status(200).json(list);
  } catch (error) {
    console.error(error);
    // 返回错误信息给客户端
    res.status(500).json({ error: "获取数据失败", details: error.message });
  }
};

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