如何在 react native 中使用 await 关键字？答案

【问题标题】：How to use await key word on react native?如何在 react native 中使用 await 关键字？
【发布时间】：2016-03-05 03:45:01
【问题描述】：

我尝试在 react native 上使用 await/async，但出现意外令牌错误。

我在我的 javascript 源文件中添加了代码：

var value = await AsyncStorage.getItem('STORAGE_KEY');

我的 react native 版本是 0.15.0。

是否需要添加一些配置才能使用 async/await？

【问题讨论】：

您是否尝试过将其包装在类似于文档的 try catch 块中？
@NaderDabit 我尝试将其包装在 try catch 中，但结果相同。

标签： react-native

【解决方案1】：

在阅读了关于 react-native GitHub 问题的 this comment 之后，以下内容对我有用：

添加以下 npm 模块：

npm install babel-preset-react-native-stage-0 --save

将以下配置添加到您的.babelrc 文件中：

{ presets: ['react-native-stage-0'] }

清除缓存：

$ watchman watch-del-all
$ ./node_modules/react-native/packager/packager.sh --reset-cache

【讨论】：

【解决方案2】：

我在我的 react native 应用程序中使用 async/await，并且不需要在我的项目中配置或启用它。我的用法是……

async getCache(key){
    try{
        let value = await AsyncStorage.getItem(key);
        return value.json();
    }
    catch(e){
        console.log('caught error', e);
        // Handle exceptions
    }

}

注意： 如果您在未使用异步显式声明的函数中使用 await，最终会出现 Unexpected token 语法错误。

【讨论】：

我阅读了release note，发现0.16版本增加了babel支持。我想这就是我失败的原因。
请注意，如果您在未使用async 显式声明的函数中使用await，最终会出现Unexpected token 语法错误。
我使用的是 0.28.0，无法使用 async 或 await。
仔细检查您的 .babelrc 文件是否设置正确{ "presets": ["react-native", "es2015", "babel-preset-stage-3"] }，您可能会在此处找到一些线索来帮助您进行故障排除。 github.com/facebook/react-native/issues/6901
你在 Android 上也检查过这个吗？我的 Android 应用程序出现了一些问题，而 iOS 应用程序运行良好。

【解决方案3】：

如果您的项目根目录中有.babelrc 文件，则需要添加"react-native" 预设：

npm i babel-preset-react-native --save-dev

然后在您的.babelrc 文件中添加以下内容：

{
  "presets": ["react-native"]
}

更多信息here。

【讨论】：

【解决方案4】：

是否需要添加一些配置才能使用 async/await？

是的。 async 仍然不是规范的最终部分；他们目前被认为是“第 3 阶段”（候选人）。

您可以使用stage-3 preset 在.babelrc 中启用所有第 3 阶段语言提案。或者，您可以添加just the async plugin。

【讨论】：