javascript - JavaScript React async/await 返回错误的正文？

Question

我是 React 新手，正在尝试使用Java REST后端的 UI 项目。

我在开发工具窗口中看到了非常疯狂的事情。

每隔几次刷新，loadedFilesList从 /splitFiles 调用中获取数据。

我已经确认REST服务可以正常工作。如果我在下面突出显示的行上调试并暂停，则body2包含只能来自response1.

发生了什么异步废话？

  state = {
    splitFilesList: [],
    loadedFilesList: []
  }


  logFields = () => {
      console.log('Vars', `${this.state.loadedFilesList}`)
  }

  async asyncGetSplitFiles()
  {
    let response1 = await fetch('/splitFiles');

    let body1 = await response1.json();
    this.setState({ splitFilesList: body1.files }, () => {this.logFields()});
  }

  async asyncGetLoadedFiles()
  {
    let response2 = await fetch('/loadedFiles');

    let body2 = await response2.json();    <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    this.setState({ loadedFilesList: body2.files }, () => {this.logFields()});
  }

  async componentDidMount() {
      this.asyncGetSplitFiles();
      this.asyncGetLoadedFiles();
  }

标签： javascriptreactjsasync-await

Answer 1

好吧，我修好了。虽然不明白为什么。

  async componentDidMount() {
      await this.asyncGetSplitFiles();
      await this.asyncGetLoadedFiles();
  }