mahmoudismail mahmoudismail - 1 month ago 10
HTTP Question

Ionic 2 Promise Different data from server

I've used

ionic 2 RC0
with promise to getting data from the server but my problem i've getting some data in every request because promise the data.

So my question is :

how can resolve this problem with promise different data every request ? any suggestion ?

My Code:


Api.ts


import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/from';
import 'rxjs/Rx';

@Injectable()
export class Api {
storeData: any;

constructor(public http: Http) {
this.storeData = null;
}

getData(id) {
if (this.storeData) {
return Promise.resolve(this.storeData);
}
return new Promise(resolve => {
this.http.get(URL+'?id='+id)
.map(res => res.json())
.subscribe(data => {
this.storeData = data.products;
resolve(this.storeData);
});
});
}

}


In Home Page i've read the data from api like below code :


Home.ts


import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/from';
import 'rxjs/Rx';

@Injectable()
export class Home {

constructor() {}

getDataFromApi() {
let me = this;
me.api.getData(id)
.then(data => {
if (data != null) {
for (let i = 0; i < data.length; i++) {
console.log(JSON.stringify(data));
}
}else {
this.noProducts = 'There are no products matching the selection.';
}
});
}

}



Example :


if call
getDataFromApi(12);
returned data like
{{name:bla bla, title: bla bla}}


then if call the function again with different
id
like :
10


getDataFromApi(10);
return the some data like
{{name:bla bla, title: bla bla}}


With the code above, I get an array containing the data, all data are the same. Same title, content, thumbnail image and everything.

Answer

The issue is not related to promises. The thing is that the first time you call the service, you make the request and then you're storing the response in the this.storeData property. So if you call again the service, even with a different parameter, these lines of code are executed:

if (this.storeData) {
  return Promise.resolve(this.storeData);
}

and the request is not sent to the server. That's why the service always return the response obtained in the first request. In order to avoid that, just change the service like this:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/from';
import 'rxjs/add/operator/toPromise' // <- I've added this import!!
import 'rxjs/Rx';

@Injectable()
export class Api {

  constructor(public http: Http) {
  }

  getData(id) {
      return this.http.get(URL+'?id='+id)
        .map(res => res.json())
        .map(data => data.products)  // You only return the .products from the server response right?
        .toPromise(); // <- you don't need to create a new promise, use the toPromise() method instead
  }

}
Comments