时间戳

首页 > 解决方案 > ngrx 使用多个 HTTP 请求交错加载数据

angular - ngrx 使用多个 HTTP 请求交错加载数据

问题描述

我正在使用 Angular NGRX 应用程序中的 API，该应用程序需要我进行多次调用才能获取我正在寻找的所有数据。例如，我从请求组列表开始

GET http://api-path/my/groups

这将返回一个对象数组id，如下所示：

[
    {
        "id": "MDJiZDlmZDYtOGY5My00NzU4LTg3YzMtMWZiNzM3NDBhMzE1IyNkMmM2ZjExMS1mZmFkLTQyYTAtYjY1ZS1lZTAwNDI1NTk4YWE="
    },
    {
        "id": "MDJiZDlmZDYtOGY5My00NzU4LTg3YzMtMWZiNzM3NDBhMzE1IyMxNGQ2OTYyZC02ZWViLTRmNDgtODg5MC1kZTU1NDU0YmIxMzY="
    },
    {
        "id": "MDJiZDlmZDYtOGY5My00NzU4LTg3YzMtMWZiNzM3NDBhMzE1IyMyMGMzNDQwZC1jNjdlLTQ0MjAtOWY4MC0wZTUwYzM5NjkzZGY="
    },
    {
        "id": "MDJiZDlmZDYtOGY5My00NzU4LTg3YzMtMWZiNzM3NDBhMzE1IyMyYTg0OTE5Zi01OWQ4LTQ0NDEtYTk3NS0yYThjMjY0M2I3NDE="
    },
    {
        "id": "MDJiZDlmZDYtOGY5My00NzU4LTg3YzMtMWZiNzM3NDBhMzE1IyMzNGIwMTg1MS1jMTNkLTQ2MDQtYmIzYi01ZGUxZWNiZjAyODg="
    },
    {
        "id": "MDJiZDlmZDYtOGY5My00NzU4LTg3YzMtMWZiNzM3NDBhMzE1IyM1YWY2YTc2Yi00MGZjLTRiYTEtYWYyOS04ZjQ5YjA4ZTQ0ZmQ="
    },
    {
        "id": "MDJiZDlmZDYtOGY5My00NzU4LTg3YzMtMWZiNzM3NDBhMzE1IyM4NmZjZDQ5Yi02MWEyLTQ3MDEtYjc3MS01NDcyOGNkMjkxZmI="
    },
]

然后我必须调用每个id对象以获取详细信息：

GET http://api-path/group/{ID}

我目前正在使用效果来触发这些调用：

  loadGroupSuccess = createEffect(() =>
    this.actions$.pipe(
      ofType(fromActions.loadGroupSuccess),
      delay(this.debounceTime(), asyncScheduler),
      filter(({ group }) => !!team),
      mergeMap(({ group }) => [
        ...group.map((id) =>
          fromActions.loadGroupDetails({ id })
        ),
      ])
    )
  );

该loadGroupDetails操作由另一个效果接收并调用 API。我目前正在使用该this.debounceTime()函数注入 0-500 毫秒之间的随机延迟。如果我不把它放进去，所有的 XHR 请求都会同时发生，并且在下载数据时浏览器会被锁定。

我觉得有更好的方法来处理这样的事情。有没有办法错开请求，以便一次只发生几个？有没有比使用效果更好的方法来调用这些 API？

标签： angularrxjsngrxangular-http

解决方案

您可以设置一个并发参数mergeMap，可以提高您的性能，

mergeMap(getHttp, 3)

在这种情况下，在任何给定时间最多同时进行 3 个呼叫

推荐阅读