如何在 Angular 中循环进行可取消的 api 调用？

Question

我有一个包含参数的列表，例如：

[
    {a:1a,b:1b,c:1c},
    {a:2a,b:2b,c:2c},
    {a:3a,b:3b,c:3c}
]

对于每个参数对象，我的目标是发起三个连续的 API 调用，每个调用都有特定的值。随后，程序应等待调用按顺序完成 – API 1 使用“a”中的值调用，API 2 使用“b”中的值调用，API 3 使用“c”中的值调用。

这些调用应该一个接一个地发生，并且必须可以在用户通过 UI 按钮执行操作时取消它们。

例如，如果用户在第一个呼叫正在运行时取消第二个呼叫，则应终止第二个呼叫。完成一次通话后，下一次通话应进行第三次通话。

如何实现这一目标？

我尝试使用 Rxjs，但现在不确定是否可以从 UI 实现可取消的操作

Answer 1

您可以使用

switchMap

的组合（使事物可取消）和

takeUntil

与“取消”可观察量的组合，这可以让您切断可观察流。对于您的参数，您可以循环它们并使用如下结构：

const URL1 = buildURL1FromParameters(/* parameters like {a:1a,b:1b,c:1c} */)
/* other urls... */

const calls$ = of(null).pipe(
      switchMap(data => {
        return this.http.get(URL1).pipe(
          map(first => {
            return {...data, first};
          })
        );
      }),
      switchMap(data => {
        return this.http.get(URL2).pipe(
          map(second => {
            return {...data, second};
          })
        );
      }),
      switchMap(data => {
        return this.http.get(URL3).pipe(
          map(third => {
            return {...data, third};
          })
        );
      }),
      takeUntil(this.cancelHttpCalls$)
  })
      

您可以根据需要修改构建最终对象，但订阅

calls$

将为您带来像

{first: ..., second: ..., third: ...}

这样的对象

this.cancelHttpCalls$

应该是您服务上的可观察对象，您可以通过点击来调用

service.cancelHttpCalls$.next()

，这将取消它。

根据需要进行设置或重新链接，但这应该能让您继续前进。