是否可以在 React JS 中使用 async / await？答案

【问题标题】：Is it possible to use async / await in React JS?是否可以在 React JS 中使用 async / await？
【发布时间】：2016-11-16 08:51:41
【问题描述】：

我开始使用 React Native 编程，并且习惯了使用语法：

async myFunction(){
    ...
    return await otherFunction();
}

但我不知道如何使它与共享包中的 React JS 和 React Native 兼容。我怎样才能做到这一点，以便它在两个平台上都可以工作？

谢谢！

【问题讨论】：

React Native 官方文档中的 AsyncStorage 看了吗？（编辑：刚刚注意到这是几个月前问的）
@EnieJakiro 我不知道 AsyncStorage 与该问题有何关系。我确实使用 AsyncStorage，但仅用于 React Native。

标签： reactjs react-native

【解决方案1】：

React Native 附带 Babel 和一些 Babel 预设，而 Web 上的 React 只是 React 相关代码。

如果你今天想在网络上使用 async/await，你需要 Babel 和正确的转换：https://babeljs.io/docs/plugins/transform-async-to-generator/

或第一阶段预设，这在当今的 React 应用程序中相当普遍。 http://babeljs.io/docs/plugins/preset-stage-1/

【讨论】：

感谢您的回答@azium。我都安装了，在运行“npm run dev”之后，我收到异步函数的错误“Unexpected token”
你将不得不展示更多关于你的项目来诊断..你能发布你的 package.json 和 webpack.config.js 文件吗？
最后，transform-async-to-generator 确实适用于 React，感谢 @azium

【解决方案2】：

如果您使用 create-react-app 进行构建，它自 v0.2.3 起就可用

https://github.com/facebookincubator/create-react-app/releases/tag/v0.2.3

它可以像这样在组件内部使用

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { message: '' };
  }

  async componentDidMount() {
    this.setState({ message: 'loading...' });
    let d = await getData('/posts/1');
    this.setState({ message: d });
  }

  render() {
    let { message } = this.state;
    return (
      <div className="App">
        <p className="App-intro">
          { message }
        </p>
      </div>
    );
  }
}

见：

https://github.com/facebookincubator/create-react-app/issues/1024

【讨论】：

这是一个非常好的提示。我不知道这种构建应用程序的方式。谢谢！
Tim，异步 componentDidMount 方法有什么用？
谢谢，但它不适用于箭头函数。我使用箭头函数来避免在构造函数中绑定this 的额外代码行。有关如何使其与箭头功能兼容的任何提示。我正在使用 CRA
nvm 我写的是async somefunction = () => { }而不是somefunction = async () => { }

【解决方案3】：

您也可以使用Typescript。

从 2.1 版开始，可以使用async/await 和直接使用transpile to ES5（换句话说，它可以在~所有浏览器上运行）

【讨论】：