ngrx 通过多个 HTTP 请求交错加载数据

Question

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

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

那 returns 个 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？

Answer 1

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

mergeMap(getHttp, 3)

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

ngrx 通过多个 HTTP 请求交错加载数据

ngrx stagger load data with multiple HTTP request

rxjs

angular-http

ngrx

angular