2017-05-24 131 views
3

我有一系列循环通过小工具的Http调用。有没有办法中止所有请求Angular2:取消循环中的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()); 
    } 

} 
+0

“abort”是什么意思?您必须看到this._http.get会立即创建HTTP请求,但稍后会异步返回响应。你想中止实际的HTTP请求或只是取消订阅返回的Observable对象? – wannadream

+0

是的,我知道这一点。无论哪种方式都可以,放弃实际请求或取消订阅。但是您看到有多个请求,因为请求在循环内 – indra257

+0

在什么情况下,您想要取消订阅Observable对象? – wannadream

回答

4

请看看这是你想要的。

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

工程就像魅力:) – indra257

0

您可以为您的要求增加超时,然后unsubscribe从观测服务代码。

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

如果你有一个点击事件,你可以保存到你所有的观测值(inside your loop)的引用,并把它们放在一个列表,然后你的函数内部(例如onClick())通过从所有的观测量该列表和unsubscribe迭代。

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

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

    myObservable.unsubscribe(); 

从GitHub的文档:unsubscribesubscribe

试图彻底:

您还可以添加观测量到其他观测量,这样,当你从主(父)退订观察到的所有可观察到的内容也将取消订阅。您可以使用Observable对象中包含的方法addremove来实现它。

可能有更好的方法来做到这一点,但这是我的头顶。

+0

那么你想在哪里添加超时,因为有多个待处理的请求。我没有明确地表达你的意思。你能解释一点吗? – indra257