带有加载屏幕的异步功能答案

【问题标题】：Async function with a loading screen带有加载屏幕的异步功能
【发布时间】：2017-02-25 21:03:08
【问题描述】：

我正在像这样在构造函数中设置状态 - 这是用于显示“正在获取数据...”的文本：

this.state = {
      loading: true
    }

然后我有一个像这样的异步函数，它将获取一些数据。

componentDidMount() {
    this.fetchData().done()
  }

  async fetchData() {
    const response = await fetch(URL)
    const json = await response.json()
    const stars = json.stargazers_count
    this.setState({ stars })
  }

我如何知道何时可以将 isLoading 状态设置为 false 并隐藏加载文本并显示数据？我似乎在这里遗漏了一些东西！

谢谢约旦

【问题讨论】：

async/await 不是 ES7 的一部分。
@FelixKling 不是被正式接受为 ES7 提案吗？我会说这已经足够接近了。
@patrick：提案在第 4 阶段之前不是任何版本的一部分。ES7(ES2016) 于今年发布，不包含 async/await (ecma-international.org/ecma-262/7.0)。它将成为 ES2017 的一部分。

标签： react-native async-await ecmascript-2017

【解决方案1】：

当你在你的状态中插入stars时，你也可以设置isLoading为false

this.setState({ stars, isLoading: false });

【讨论】：