React项目Axios搭配async/await本地测试手机端报scheduleArr未定义错误

实际场景 #

• 项目采用JavaScript编写开发，未使用TypeScript，在本地同时做电脑端、手机端的功能测试
• 电脑端页面全量功能运行正常，同一份代码在手机端加载时直接抛出报错：Unhandled Rejection (TypeError): undefined is not an object (evaluating 'scheduleArr.forEach')
• 注释掉对应的数据获取函数后，手机端可正常加载，初步定位问题和async/await的使用逻辑相关，但无法理解为什么同一段代码会出现跨端运行差异

存在问题的代码片段 #

async function getSchedule() {
  let scheduleArr = await axios.get('api/schedule/')
    .then(response => { 
      return response.data; 
     })
    .catch((error) => {
       console.log(`ERROR: ${error}`);
    });

  scheduleArr.forEach(game => {
    /* do stuff */
  }
}

注：原代码块存在括号不匹配的语法疏漏，粘贴时的格式误差可能掩盖了这一问题

问题根因 #

报错本质和async/await的语法跨端兼容没有关系，核心是两个未被覆盖的异常场景：

• 当前catch分支只打印了错误日志，没有返回任何兜底值。当接口请求失败时，这个Promise最终resolve的结果是undefined，赋值给scheduleArr后，后续直接调用scheduleArr.forEach自然会触发“对象为undefined、找不到forEach方法”的报错
• 电脑端测试时一直运行正常，只是因为电脑端请求接口全程走成功分支，拿到的response.data本身是数组结构，自然不会触发上述报错；手机端出现请求失败是大概率事件：本地开发场景下，如果服务监听地址是localhost，手机端根本无法解析这个地址，加上接口用的是相对路径api/schedule/，手机端访问时会把请求发到手机自己的域名地址下，必然请求失败、直接走catch分支

修正方案 #

1. 给异常分支补兜底逻辑，保证下游拿到的变量类型稳定，避免直接操作undefined：

   async function getSchedule() {
     let scheduleArr = await axios.get('api/schedule/')
       .then(response => response.data || [])
       .catch((error) => {
          console.log(`ERROR: ${error}`);
          // 兜底返回空数组，保证变量是可遍历的数组类型
          return [];
       });
   
     // 加一层类型判断，进一步避免运行时崩溃
     if (Array.isArray(scheduleArr)) {
       scheduleArr.forEach(game => {
         /* do stuff */
       })
     }
   }
   

2. 修正跨端访问的网络配置：本地开发时把服务的host设置为0.0.0.0，让同局域网的手机可以通过电脑的局域网IP访问到开发服务，同时把axios的baseURL配置成对应IP地址，避免相对路径在手机端解析错误

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