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 的方法？

解决方法

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

mergeMap(getHttp,3)

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