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

Question

我开始使用React Native编程,我习惯使用语法:

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

但我不知道如何使它与共享包中的React JS和React Native兼容.我怎样才能实现这一点,以便它可以在两个平台上运行？

谢谢!

Answer 1

如果您使用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

Answer 2

React Native附带了Babel和一些Babel预设,而网上的React只是React相关代码.

如果你想使用异步Web上/等待今天你需要巴贝尔和正确的转换:https://babeljs.io/docs/plugins/transform-async-to-generator/

或者是阶段1预设,这在今天的React应用程序中相当普遍.http://babeljs.io/docs/plugins/preset-stage-1/