2017-05-24 137 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