javascript - 并行调用异步/等待函数不适用于 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 不是异步代码和/或返回 promise ，尽管没有看到它，但很难确定。试试这个:

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>}

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