Can't subscribe data using one subscribe function in ionic 2

Question

This is my get method.

    get(url: string, options?: RequestOptionsArgs): Promise<Observable<{}>> {
    return new Promise((resolve, reject) => {
      this._frotzOptions(url, options).then((data) => {
        if (data) {
          resolve(this.http.get(url, data));
        } else
          resolve(false);
      }).catch((err) => {
        reject(err);
      });
    });
  }

_frotzOptions method.

     private _frotzOptions(urlo: string | Request, options: RequestOptionsArgs): Promise<{}> {
    if (!options) {
      options = {}
    }
    if (!options.headers) {
      options.headers = new Headers();
    }
    return new Promise((resolve, reject) => {
      this.storage.get('token').then(token => {
        options.headers.append('Content-Type', 'application/json');
        options.headers.append('Authorization', 'Bearer ' + token);
        if (token) {
          resolve(options);
        }
        else
          resolve(false);
      }).catch((err) => {
        reject(err);
      });
    });

  }

home.ts

var subscription = Observable.fromPromise(this.ahttp.get(url));
subscription.subscribe((data) => {
  data.subscribe(rsp => {
    console.log("rsp", rsp);
  })
}, (err) => {
  console.log(err)
});

When I need to use data which are resolving fro the get method, I have to use a subscribe within a subscribe! What is the best way to do this by using a subscribe! Any suggestions! Thank you!

score 0 · Answer 1 · answered Jun 06 '17 at 07:12

Hi why don 't you just do like this:

private _frotzOptions(urlo: string | Request, options: RequestOptionsArgs): Observable<any> { //<--!! CHANGE TO OBSERVABLE from Rx/rx
if (!options) {
  options = {}
}
if (!options.headers) {
  options.headers = new Headers();
}
return new Promise((resolve, reject) => {
  this.storage.get('token').then(token => {
    options.headers.append('Content-Type', 'application/json');
    options.headers.append('Authorization', 'Bearer ' + token);
    if (token) {
      resolve(options);
    }
    else
      resolve(false);
  }).catch((err) => {
    reject(err);
  });
});

and then when you want to use it:

this.ahttp.get(url).subscribe((data) => {
  data.subscribe(rsp => {
    console.log("rsp", rsp);
  })
}, (err) => {
  console.log(err)
});

And last ... to inject your Bearer token in request use INTERCEPTOR ... maybe with some plugin like:

https://www.npmjs.com/package/angular2-http-interceptor

score 0 · Answer 2 · answered Jun 06 '17 at 07:19

Using a new promise constructor over another promise/observable is an antipattern. Convert your observable and just return it.

Your get function can be simplified to:

 get(url: string, options?: RequestOptionsArgs): Promise<{}> {
    return this._frotzOptions(url, options).then((data) => {
        if (data) {
          return this.http.get(url, data).toPromise(); //use Observable toPromise function
        } else
          return false;
    }).catch((err) => {
         console.log(err); // handle error
   });
  }

And your _frotzOptions function:

  private _frotzOptions(urlo: string | Request, options: RequestOptionsArgs): Promise<{}> {
    if (!options) {
      options = {}
    }
    if (!options.headers) {
      options.headers = new Headers();
    }
    return this.storage.get('token').then(token => {
        options.headers.append('Content-Type', 'application/json');
        options.headers.append('Authorization', 'Bearer ' + token);
        if (token) {
          return options;
        }
        else
          return false;
    });
  }

This is called promise chaining

Can't subscribe data using one subscribe function in ionic 2

2 Answers2