Ionic 2: stop an http request

Question

My provider makes available an API for an http.get request:

join(){
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('x-access-token',this.getToken());
    return Observable.create(observer =>{
        this.http.get('/localhost/chat/'+this.room,{headers : headers})
                .map(res => res.json())
                .subscribe(
                    data=>{                         
                        observer.next(data);
                    },
                    (err) =>{
                        observer.error(err);
                    }
                );
    })
}

My page.ts just use this API cyclically:

join(){
    this.myProvider.join().subscribe(
        (data)=>{
            if(data.success){
                ... /* doing smt */ ....
                this.join();
            }else{
                this.message=data.message;
                //TBD sleep....
                //this.join();
            }
        },
        (err) => {
            this.message="Connectivity with server Lost...";
        });
  }

My question is: I would like to write a function in page.ts in order to stop this cycle. How can I kill a pending get request?

A solution that doesn't work was I tried to keep a pointer to the observable object in my page.ts:

export class Page {
    ...
    join_channel: any;
  join(){
    this.join_channel = this.myProvider.join().subscribe(
        (data)=>{
            ...
                this.join();
            ...

Then I by calling the this.join_channel.unsubscribe() I wanted to close the request, so in my case:

  ionViewWillLeave() {
    this.join_channel.unsubscribe();
    delete this;
  }

But even by unsubscribing, the get request is still there pending; so when I try to enter again in my page, a new join() can't receive a http.get response at the first step, because the answer will be used before for the previous request which is still pending.

Answer 1

Use timeout from rxjs

this.http.get(API)
    .timeout(2000)
    .map(res => res.json()).subscribe((data) => {
      return data;
    },
      (err) => {
        return err;
      }
    );

Don't forget to import import 'rxjs/add/operator/timeout';