Angular2：取消循环中的Http请求答案

【问题标题】：Angular2: Cancel Http requests that are in a loopAngular2：取消循环中的Http请求
【发布时间】：2017-05-24 19:16:16
【问题描述】：

我有一系列通过小工具循环进行的 Http 调用。有没有办法中止所有请求

      for (let gadget of gadgets) {
               this.userService.getGadgetsData(gadget.Id, gadget.Name).subscribe(gadgetsData => {   
    });
}

component.service.ts 中我的服务代码

@Injectable()
export class UserService {
    constructor(public _http: Http) { }
 getGadgetsData() {

        return this._http.get(this._dashboards, { headers: this.getHeaders() })
            .map((res: Response) => res.json());
    }

}

【问题讨论】：

“中止”是什么意思？您必须看到 this._http.get 会立即创建 HTTP 请求，但稍后会异步返回响应。您想中止实际的 HTTP 请求还是只是取消订阅返回的 Observable 对象？
是的，我知道这一点。无论哪种方式都可以，中止实际请求或取消订阅。但是您会看到有多个请求，因为请求在循环中
在什么情况下要取消订阅 Observable 对象？
我想在我的按钮点击事件中这样做

标签： angular rxjs observable angular2-http angular2-observables

【解决方案1】：

如果这是你想要的，请看看。

observableList: [];

......

for (let gadget of gadgets) {
    let obs = this.userService.getGadgetsData(gadget.Id, gadget.Name).subscribe(gadgetsData => {
    });
    this.observableList.push(obs);
}

...
onClick() {
    for (let i = 0; i < this.observableList.length; i++) {
        this.observableList[i].unsubscribe();
    }
}

【讨论】：

像魅力一样工作:)

【解决方案2】：

您可以为您的请求添加超时，然后从您的 observables 中添加unsubscribe。

注意：由于您的示例代码，我假设您正在使用 RxJs 和 Observable。

如果您有一个点击事件，您可以保存对所有可观察对象 (inside your loop) 的引用并将它们放在一个列表中，然后在您的函数中（例如 onClick()）遍历该列表和 unsubscribe来自你所有的 Observables。

    var myObservable = this.userService.getGadgetsData(gadget.Id, gadget.Name)
          .subscribe(gadgetsData => {});

    //later on your code, maybe on your click event

    myObservable.unsubscribe();

来自 github 文档：unsubscribe 和 subscribe

尽量做到彻底：

您还可以将 Observables 添加到其他 Observables，这样当您取消订阅主（父）observable 时，其中包含的所有 observable 也将取消订阅。您可以使用 Observable 对象中包含的 add 和 remove 方法来实现它。

可能有更好的方法来做到这一点，但这不是我的想法。

【讨论】：

那么你希望我在哪里添加超时，因为有多个待处理的请求。我没明白你的意思。你能解释一下吗？