React异步子函数返回值为undefined，我哪里出错了？

核心错误原因 #

• 你的子函数ScheduleChild没有显式返回请求的处理结果，async函数无return语句时，默认返回的Promise包裹的值就是undefined，父组件await拿到的自然就是空值。
• 你在then、catch回调里写的return仅会将值传递到Promise链的下一环，没有被外层的子函数return出去，不会对外层的返回值生效。

修复方案 #

方案1：直接补全return语句（兼容你现有的then/catch写法） #

子函数修改如下：

export default async function ScheduleChild(data){
  // 前面加return，把整个请求的处理结果返回给调用方
  return await axios({
          method: "POST",
          url: "替换为你的实际接口地址",
          data: {data}
      }).then(res => {
          console.log(res)
          return res
      }).catch(err => {
          console.log(err)
          return err
      });  
}

方案2：统一使用async/await + try/catch写法（更推荐，逻辑更清晰，避免return作用域混淆） #

子函数修改如下：

export default async function ScheduleChild(data){
  try {
    const res = await axios({
      method: "POST",
      url: "替换为你的实际接口地址",
      data: {data}
    })
    console.log(res)
    return res
  } catch (err) {
    console.log(err)
    // 如果需要父组件区分请求成功/失败状态，这里改为throw err，父组件用try/catch捕获即可
    return err
  }
}

可选优化：父组件增加错误捕获逻辑 #

如果子函数catch里抛出错误，父组件可以按如下写法区分处理成功/失败场景：

async function scheduleParent(){
  try {
    const returned = await ScheduleChild(data)
    console.log('请求成功返回值：', returned)
  } catch (err) {
    console.log('请求失败错误信息：', err)
  }
}

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