Est-il possible d'utiliser async / await dans React JS?
J'ai commencé à programmer en React Native, et je me suis habitué à utiliser la syntaxe:
async myFunction(){
...
return await otherFunction();
}
Mais je ne sais pas comment le rendre compatible avec React JS et React Native dans un paquet partagé. Comment puis-je accomplir cela pour que cela fonctionne sur les deux plates-formes?
Merci!
3 réponses
React natif est livré avec Babel et certains presets Babel, alors que React sur le web est juste un code lié à React.
Si vous voulez utiliser async/await sur le web aujourd'hui, vous aurez besoin de Babel et des transformations correctes: https://babeljs.io/docs/plugins/transform-async-to-generator/
Ou les préréglages stage-1, ce qui est assez courant dans les applications React aujourd'hui. http://babeljs.io/docs/plugins/preset-stage-1/
Si vous construisez en utilisant create-react-app, il est disponible depuis v0.2. 3
Https://github.com/facebookincubator/create-react-app/releases/tag/v0.2.3
Il peut être utilisé dans un composant comme celui-ci
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>
);
}
}
Voir:
Https://github.com/facebookincubator/create-react-app/issues/1024
Alternativement, vous pouvez utiliser Tapuscrit.
Depuis la version 2.1, il est possible d'utiliser async/await et directement transpile à ES5 (en d'autres mots le sur ~tous les navigateurs)