React的componentDidMount中并行调用async/await函数失效问题

嘿，我看你遇到了Promise.all没并行执行HTTP请求的问题，这事儿我之前也碰到过，给你捋捋可能的原因和解决办法：

首先得明确：Promise.all能实现并行的核心是，你传进去的每个Promise必须是已经在执行状态的。如果你的this.func是async函数，调用它的时候就会立刻执行到第一个await语句，按道理两个请求应该同时发出去才对。那为啥会出现串行的情况呢？

最可能的问题：this.func的写法拖了后腿 #

如果this.func内部有同步阻塞的代码，或者不是立刻发起HTTP请求，那第二个调用就得等第一个的同步代码跑完才能开始执行。比如要是你的func是类似这样写的：

async func(url) {
  // 这里有大量同步计算或阻塞操作
  for(let i = 0; i < 1000000; i++) {}
  // 直到这里才发起请求
  const res = await fetch(url);
  return res.json();
}

那这段同步循环会把第二个请求的发起时间硬生生拖后，导致看起来是串行执行的。

还有一种少见但值得排查的情况：如果this.func返回的不是Promise，而是一个返回Promise的函数，那你在Promise.all里传入的其实是两个函数引用，根本没触发请求——不过这种情况你应该连请求都看不到，可能性不大。

怎么确保请求真·并行？ #

先把this.func改成调用后立刻发起请求的结构，比如：

async func(url) {
  // 直接发起请求，避免前置同步阻塞
  const response = await fetch(url);
  return await response.json();
}

你的componentDidMount写法本身是没问题的，但还需要确认两个点：

• 两个请求的URL不是完全相同的（有些浏览器或服务器会对相同URL的请求做缓存或排队处理）
• 服务器端没有对该接口做请求串行限制（比如同一个接口的请求被服务器排队执行，那前端再怎么并行也没用）

附上你的代码方便对照：

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

当前请求时序：

预期并行请求时序：

内容的提问来源于stack exchange，提问作者Eduardo