Http request in ionic 2

Question

I am new to Ionic framework & going to develop an app which utilises rest api from my server. In each API I have to pass a token in http header. If this token is valid then I return response & inflate the listview. If token is not valid then I have to hit another API to generate token & again hit first API to fetch data.

My problem is second case. When token is invalid, it is generate successfully & then calling first API is also successful but this time listview is not inflated. Please help.

home.ts

loadPeople(){
this.dataService.load()
 .then(data => {
   this.mylist = data;
  });
}

data-provider.ts

load() {
 if (this.data) {
 return Promise.resolve(this.data);
}

return new Promise(resolve => {
let headers = new Headers({ 'token': this.token });
let options = new RequestOptions({ headers: headers });
this.http.get('myurl1', options)
  .map(res => res.json())
  .subscribe(data => {
    if(data.message === 'TOKEN_NOTVALID'){
       this.generateToken();
    }else{
        this.data = data.result;
      resolve(this.data);
    }
  });
 });
 }

generateAccessToken(){

 var creds = "param1=xxx&param2=zzz";
 var headers = new Headers();
 headers.append('Content-Type', 'application/x-www-form-urlencoded');

 this.http.post('myUrlHere', creds, {
   headers: headers
   })
   .map(res => res.json())
   .subscribe(
     data => {
     this.token = data.token;
     this.load();
     });
 }

raj · Accepted Answer · 2017-03-04 07:45:14Z

The problem is that when token is invalid , the Promise is never resolved. Only the second call to load function Promise is resolved. So you need to resolve the Promise when token is not valid. Just because the name of the function is resolve in the Promise, doesnt mean that the second call to load function will resolve the first call to load function.

You can return the data promise in generateAccessToken then resolve the promise with data returned.

load() {
 if (this.data) {
 return Promise.resolve(this.data);
}

return new Promise(resolve => {
let headers = new Headers({ 'token': this.token });
let options = new RequestOptions({ headers: headers });
this.http.get('myurl1', options)
  .map(res => res.json())
  .subscribe(data => {
    if(data.message === 'TOKEN_NOTVALID'){
       this.generateToken().then(data => { resole(data) } );
    }else{
        this.data = data.result;
      resolve(this.data);
    }
  });
 });
 }

generateAccessToken(){

 var creds = "param1=xxx&param2=zzz";
 var headers = new Headers();
 headers.append('Content-Type', 'application/x-www-form-urlencoded');

 return this.http.post('myUrlHere', creds, {
   headers: headers
   })
   .map(res => res.json())
   .toPromise()
   .then(
     data => {
     this.token = data.token;
     return this.load();
     });
 }

You will have to import toPromise

import 'rxjs/add/operator/toPromise';

thanks for reply but it is giving 'then' does not exist on type 'void' error.

Collectives™ on Stack Overflow

Http request in ionic 2

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related