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 而不是获取来测试它：

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 毫秒和 returns 的异步任务。如果 Promise.all() 不是 运行 这个并行， wait(100) 版本肯定需要 200ms 或更长时间。

fetch 不如 setTimeout 可靠，因为它是 运行 通过网络进行的测试。您无法通过此调用控制很多事情，例如：

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

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