Problem with promise in ionic

Ionic Framework ionic-v3
1

Hi everyone,

I encounter a problem with promise in my ionic application that I develop to succeed my school degree.

I have a PHP API server who send me back a JSON in text format when I post a request like registering a new user.

This request is made by a provider and the reponse from the server is parsed into JSON format by JSON.parse function on the resolve function that I return. Just like this:

 TEST_API(){

  return new Promise((resolve, reject) => {

   let user = {pseudo:'francouille',password:'Tozoo$123',confirmPassword:'Tozoo$123',email:'zango@tozoo.fr'};
   let data: URLSearchParams = this.serialize(user);
   let url = "http://api-liwee.local/register/";

   let http = new XMLHttpRequest();

   http.open("POST", url, true);

   http.onload = () => resolve(JSON.parse(http.responseText));
   http.onerror = () => reject(http.statusText);
   
   http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

   http.send(data);
});
  }

After that I console.log() the returned promise from another page of my application who call this funtion, just like this:

reponse : Promise<any>;

  TestAPI() {
    this.reponse=this.apiProvider.TEST_API();
    console.log(this.reponse);
  }

And my problem is now, I get this on my firefox console:

{…}
​
__zone_symbol__state: true
​
__zone_symbol__value: {…}
​​
error: Object { code: "PSEUDO_ALREADY_USE", message: "Le pseudo que vous avez indiqué est déja utilisé par un autre utilisateur." }
​​
success: false
​​
__proto__: Object { … }
​
__proto__: Object { then: then(), catch: catch(), … }

So the values that interest me are on the __zone_symbol__value field of this object, but I can’t acces them with: this.response.__zone_symbol__value like the others objects I used before.

I hope somebody can help me for this problem.

Thanks.

François.

2

What you’re seeing is just the raw promise data stuff.

What you need to do is

this.reponse=this.apiProvider.TEST_API();
this.reponse
.then(data => console.log("my data", data))
.catch(err => console.error("Error loading my data", err);
2 Likes
3

Yeah, it works! Thanks :grinning:

It shows me in firefox console:

my data {…} ​ error: Object { code: "PSEUDO_ALREADY_USE", message: "Le pseudo que vous avez indiqué est déja utilisé par un autre utilisateur." } ​ success: false ​ __proto__: Object { … }

BUT there is another problem now! I can’t access the fields of this object!

If I write this to access the success field of my object named data:

  TestAPI() {
    this.reponse=this.apiProvider.TEST_API()
    .then(data => console.log("my data", data.success))
    .catch(err => console.error("Error loading my data", err));
  }

I get an error on the .success which is underlined in red, with the message :
The property 'success' does not exist on type '{}'

I hope you can help me again.

Thanks.

4

It’s ok I solve the problem, that was because my object data was of type any so I just cast It as an Object like this: .then(data => console.log("my data", Object(data).success)) and I can get that on my console: my data false that is the content of the field success I want to use.

Thanks for all, and have à nice day :grinning: