javascript - 一次下载两个 URL，但一个完成后立即处理

Question

我有两个 API 网址要访问。已知速度很快(约 50-100 毫秒)。已知速度较慢(约 1 秒)。我使用这些结果向用户显示产品选择。目前我正在等待下载一个，然后下载第二个。非常同步，因此它为已经很慢的第二次点击增加了 50-100 毫秒。

我愿意:

• 同时发送两个请求
• 一有请求返回就开始处理数据
• 等待这两个请求，然后再继续。

我看过 Axios 给出的示例...

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

但是这似乎要等待两个 URL 都提交。这仍然会稍微快一些，但我希望 50 毫秒 API 命中的数据在准备就绪后立即开始显示。

Answer 1

当然，您可以将附加的 .then 链接到 axios 返回的 promise :

  Promise.all([
    getUserAccount()
      .then(processAccount),
    getUserPermissions()
      .then(processPermissions)
  ]).then(([userAccount, permissions]) => {
     //...
  });

我们的processAccount和processPermissions是将axios响应对象作为参数并返回想要的结果的函数。

当然，您也可以将多个 .then 添加到同一个 Promise:

  const account = getUserAccount();
  const permissions = getUserPermissions();

  // Show permissions when ready
  permissions.then(processPermissions);

  Promise.all([account, permissions])
  .then(([account, permissions]) => {
     // Do stuff when both are ready
  });

<小时/>

我用 Promise.all 替换了 axios.all - 我不知道为什么 axios 提供了这个帮助器，因为 JS 有一个 native 实现。我尝试查阅文档...但他们甚至没有记录该 API。