Блог

Я работаю с API в приложении Angular NGRX, которое требует, чтобы я делал несколько вызовов, чтобы получить все данные, которые я ищу. Например, я начинаю с запроса списка групп

 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. В настоящее время я вводю случайную задержку в диапазоне от 0 до 500 мс с this.debounceTime() помощью функции. Если я этого не сделаю, все запросы XHR будут выполняться одновременно, и браузер будет заблокирован во время загрузки данных.

Я чувствую, что есть лучший способ справиться с чем-то подобным. Есть ли способ распределить запросы так, чтобы одновременно выполнялось только несколько запросов? Есть ли лучший способ обратиться к этим API, чем с помощью эффектов?

Существует параметр параллелизма, который вы можете установить, mergeMap который может повысить вашу производительность,

 mergeMap(getHttp, 3)
 

В этом случае одновременно выполняется не более 3 вызовов в любой момент времени