Angular2：取消循环中的Http请求

Question

我有一系列 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());
    }

}

Answer 1

您可以为您的请求添加超时，然后 unsubscribe 来自您的可观察对象。

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

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

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

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

    myObservable.unsubscribe();

来自 github 文档：unsubscribe and subscribe

努力做到彻底：

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

可能有更好的方法来做到这一点，但那是我的头等大事。

Answer 2

请看看这是不是你想要的。

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();
    }
}

Angular2：取消循环中的Http请求

Angular2: Cancel Http requests that are in a loop

observable

rxjs

angular2-http

angular2-observables

angular