Angular：取消订阅http请求答案

【问题标题】：Angular: unsubscribe http requestAngular：取消订阅http请求
【发布时间】：2021-10-26 11:49:10
【问题描述】：

我有一组上传大文件的 http 请求。

const requests = []

requests.push(HttpClient.post())
requests.push(HttpClient.post())
requests.push(HttpClient.post())

concat(...requests).subscribe()

我想取消一个文件上传请求例如，我想取消第二个文件上传请求。我该怎么做？

我在这里使用 concat 是因为，请求应该一个接一个地完成，即顺序。

【问题讨论】：

如果我理解正确，如果其中一个出现错误，您愿意关闭所有可观察对象吗？

标签： angular rxjs observable

【解决方案1】：

您可以通过管道传输结果请求，例如：

@Injectable()
class MyService {
    private unsubscribe$ = new Subject<void>();

    constructor(private http: HttpClient) {}

    public doRequests() {
        const requests = []

        requests.push(this.http.post())
        requests.push(this.http.post())
        requests.push(this.http.post())

        return concat(...requests).pipe(takeUntil(this.unsubscribe$)).subscribe()
    }

    public cancelRequests() {
        this.unsubscribe$.next();
    }
}

【讨论】：

这会取消所有请求吗？我只想取消一两个请求
是的，这将取消所有仍在运行的请求。我不确定我是否完全理解您想要实现的目标。

【解决方案2】：

您可以创建一个主题来发出您想要取消的请求的索引。所以这可能看起来像这样：

const cancel$ = new Subject<number>();

const requests = Array.from(Array(3).keys()).map(
  (_,i) => HttpClient.post().pipe(
    takeUntil(cancel$.pipe(
      filter(v => v === i)
    ))
  )
);

concat(...requests).subscribe();

// cancel the second request.
cancel$.next(1);

【讨论】：