componentDidMount中使用async/await返回异常值，代码存在什么问题？

嘿，我来帮你搞清楚这个问题！你看到的那个“随机值”其实根本不是什么随机数——它是浏览器定时器的ID，来自setTimeout本身的返回值。

问题根源 #

你的getData函数犯了一个关键错误：你直接返回了setTimeout()的结果，而不是返回异步操作的Promise。

咱们拆解一下你原来的代码：

getData = () => {
  return setTimeout(() => {
    // 这里创建的Promise完全没被外层函数返回！
    return new Promise(resolve => resolve( [ { id: 1, name: "Cat", }, ] ))
  }, 500)
}

setTimeout的设计就是返回一个数字ID，用来标识这个定时器（后续可以用clearTimeout(id)来取消它）。你在回调里创建的Promise根本没有被getData函数返回出去，相当于白写了——所以await this.getData()拿到的其实是这个定时器ID，不是你想要的数组数据。

修正方案 #

让getData直接返回一个Promise，把setTimeout放在Promise内部执行，这样就能正确把异步结果传递出去：

getData = () => {
  // 直接返回Promise，把异步逻辑包在里面
  return new Promise(resolve => {
    setTimeout(() => {
      // 到时间后resolve我们要的数据
      resolve([ { id: 1, name: "Cat", } ]);
    }, 500);
  });
}

async componentDidMount() {
  this.setState({ loading: true });
  const data = await this.getData();
  console.log('uh', data); // 现在会输出正确的数组啦！
}

这样修改后，await会等待Promise完成，最终拿到的就是你模拟的接口数据，而不是定时器ID了。

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