How to extend Http class of Angular2 in order to customise it (in a Ionic2 project)

Question

I'm trying to extend Http class for my Ionic2-Angular2 application. The main problem comes from getting an item from (local|session)Storage that in Ionics2 returns a Promise, and I had to convert it to an Observable (or at least I think it's because of that) to make the extension to be consistent with the return value type of each function of the class that I'm extending.

getCustomRequest(url:string, method:string, options?: RequestOptionsArgs, body?:any):Observable<any>{
    let headers = new Headers({'Content-Type': 'application/json'});

    return Observable.fromPromise(
      this.storage.get("authToken").then(
        data => {
          console.log('Token '+data);
          headers.append("Authorization", 'Token '+data);
          return this.getNewReq({method, headers, body, url}, options);
        },
        error => {
          console.log('no token!');
          return this.getNewReq({method, headers, body, url}, options);
        }
      )
    );
  }


  private getNewReq(reqOptObject, options):Request{
    let reqOpt = new RequestOptions(reqOptObject);
    if (options) {
      reqOpt = reqOpt.merge(options);
    }
    return new Request(reqOpt);
  }

  request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
    return super.request(url, options);
  }


  post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>{
    return this.getCustomRequest(url, 'POST', options, body)
               .map( newReq => { console.log(newReq); return this.request(newReq); });
  }

the error message is [line return this.getCustomRequest(url...]: Type 'Observable>' is not assignable to type 'Observable'. Type 'Observable' is not assignable to type 'Response'. Property 'type' is missing in type 'Observable'.

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2017-02-16T06:07:37

Because this.request() returns an Observable I think you need to use merge instead of map

  post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>{
    return this.getCustomRequest(url, 'POST', options, body)
               .merge( newReq => { console.log(newReq); return this.request(newReq); });
  }

How to extend Http class of Angular2 in order to customise it (in a Ionic2 project)

1 Answers