并行调用async / await函数不能在React的componentDidMount上工作

Question

我试图异步调用相同的this.func两次，this.func发出一个http请求但是我可以通过网络选项卡看到这两个函数没有并行运行。我已经阅读了这些答案：answer 1，answer 2

    async componentDidMount() {     
   //...
    var applicationVersion2 = await Promise.all([this.func(this.state.applicationUrl), this.func(this.state.applicationUrl2)]); 
   //...
    }

现在怎么样：

它应该如何：

Answer 1

正如我在上面的评论中所提到的，我怀疑this.func不是异步代码和/或返回一个承诺，虽然没有看到它，但很难说肯定。试试这个：

async componentDidMount() {     
  //...
  const first = this.func(this.state.applicationUrl)
  console.log(`First: ${first}`)   
  const second = this.func(this.state.applicationUrl2)
  console.log(`Second: ${second}`) 
  const applicationVersion2 = [await first, await second]
  //...
}

在您的console.log中，您应该看到：

First: Promise {<pending>}
Second: Promise {<pending>}

但是我猜你会从两者中看到一个非承诺的价值。如果是这种情况，请将this.func设为async function或从中返回Promise。