Javascript 中的异步编程 - Promise.all() 无法按预期工作

Question

我陷入Javascript 中的异步编程。 我知道Promise.all() 会并行运行。

你能告诉我下面这段代码有什么问题吗？

应该是100ms。但实际上，它需要200ms :(

// 1. Define function here
var getFruit = async (name) => {
  const fruits = {
    pineapple: ":pineapple:",
    peach: ":peach:",
    strawberry: ":strawberry:"
  };
  await fetch('https://jsonplaceholder.typicode.com/photos'); // abount 100ms 
  return fruits[name];
};

var makeSmoothie = async () => {
  const a = getFruit('pineapple');
  const b = getFruit('strawberry');
  const smoothie = await Promise.all([a, b]);
  return smoothie;
  //return [a, b];
};
  
/// 2. Execute code here
var tick = Date.now();
var log = (v) => console.log(`${v} \n Elapsed: ${Date.now() - tick}`);
makeSmoothie().then(log);

Answer 1

您的逻辑很好，它从客户端尽可能并行运行。

您可以通过等待 setTimeout 而不是 fetch 来测试：

await new Promise(resolve => setTimeout(resolve, 100));

占位符站点可能在其一侧排队连接或其他原因。无论哪种方式，您都应该使用可预测的东西来衡量，而不是网络。

编辑：

只是为了解释更多不适合评论的内容。

让我们把我的等待技巧变成一个实际的函数：

const wait = ms => new Promise(resolve => setTimeout(resolve, ms));

好的，现在您可以将其称为await wait(100)。现在比较一下：

• await wait(100)
• await fetch(...)

就您的代码设置而言，它们是相同的。他们正在执行一些需要大约 100 毫秒并返回的异步任务。如果Promise.all() 没有并行运行，wait(100) 版本肯定需要 200 毫秒或更长时间。

fetch 的测试不如setTimeout 可靠，因为它是通过网络运行的。这个调用有很多你无法控制的事情，比如：

• 某些浏览器会限制与同一域建立的并行连接数
• DNS 或服务器本身滞后，典型的网络故障
• 域本身可能会强制从您的 IP 一次连接 1 个

目前尚不清楚究竟是什么导致了这里明显的同步行为。也许您会在网络面板中找到一些答案。但就代码而言，您无事可做。可证明它与 setTimeout 测试并行化，因为它只是一个本地计时器，因此作为测试更可靠。