Ionic 3 Uncaught (in promise): [object Object]

I am new to Ionic 3 and mobile development. I am trying to connect a MySQL DB to my Ionic app and a PHP Restful API. I tested the API with Postman and it is working just fine, in order to implement it in Ionic I did the following, I first made a provider named Authservice:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';

let apiUrl = "http://localhost/api/"
   /*
    Generated class for the AuthServiceProvider provider. 

  See https://angular.io/guide/dependency-injection for more info on                                                                    
and Angular DI.
   */
  @Injectable()
export class AuthServiceProvider {

 constructor(public http: HttpClient) {
console.log('Hello AuthServiceProvider Provider');
}

  postData(credentials, type) {
return new Promise((resolve, reject) => {
  let headers = new HttpHeaders();

  this.http.post(apiUrl + type, JSON.stringify(credentials), { headers:    headers })
    .subscribe(res => {
      resolve(res.json());
    }, (err) => {
      reject(err);
    });
   });

      }

     }

JavaScript
​x
 
import { Injectable } from '@angular/core';import { HttpClient, HttpHeaders } from '@angular/common/http';import 'rxjs/add/operator/map';​let apiUrl = "http://localhost/api/"   /*    Generated class for the AuthServiceProvider provider. ​  See https://angular.io/guide/dependency-injection for more info on                                                                    and Angular DI.   */  @Injectable()export class AuthServiceProvider {​ constructor(public http: HttpClient) {console.log('Hello AuthServiceProvider Provider');}​  postData(credentials, type) {return new Promise((resolve, reject) => {  let headers = new HttpHeaders();​  this.http.post(apiUrl + type, JSON.stringify(credentials), { headers:    headers })    .subscribe(res => {      resolve(res.json());    }, (err) => {      reject(err);    });   });​      }​     }​

And a Signup page:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AuthServiceProvider } from '../../providers/auth-service/auth-  service';

  /**
  * Generated class for the SignupPage page.
  *
  * See https://ionicframework.com/docs/components/#navigation for more     info on
  * Ionic pages and navigation.
  */

 @IonicPage()
 @Component({
selector: 'page-signup',
templateUrl: 'signup.html',
})
export class SignupPage {
 responseData: any;
userData = {"username": "","password": "", "name": "","email": ""};
 constructor(public navCtrl: NavController, public authServiceProvider:   AuthServiceProvider) {
    }
   signUp() {
    this.authServiceProvider.postData(this.userData, "signup").then((result) =>{
     this.responseData = result;
     console.log(this.responseData);
      localStorage.setItem('userData', JSON.stringify(this.responseData));
      });
        }
       goToLogin() {
      this.navCtrl.pop();
           }
           }

JavaScript
 
import { Component } from '@angular/core';import { IonicPage, NavController, NavParams } from 'ionic-angular';import { AuthServiceProvider } from '../../providers/auth-service/auth-  service';​  /**  * Generated class for the SignupPage page.  *  * See https://ionicframework.com/docs/components/#navigation for more     info on  * Ionic pages and navigation.  */​ @IonicPage() @Component({selector: 'page-signup',templateUrl: 'signup.html',})export class SignupPage { responseData: any;userData = {"username": "","password": "", "name": "","email": ""}; constructor(public navCtrl: NavController, public authServiceProvider:   AuthServiceProvider) {    }   signUp() {    this.authServiceProvider.postData(this.userData, "signup").then((result) =>{     this.responseData = result;     console.log(this.responseData);      localStorage.setItem('userData', JSON.stringify(this.responseData));      });        }       goToLogin() {      this.navCtrl.pop();           }           }​

When running this I am getting an Uncaught (in promise): [object Object] error as can be seen here.

UPDATE

I am now getting the following error:

Object { headers: {…}, status: 404, statusText: "Not Found", url: "http://localhost/PHP-SLIM-RESTFUL/API/signup", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://localhost/PHP-SLIM-RESTFUL/API/signup: 404 Not Found", error: "<html><head><title>404 Page Not Found</title><style>body{margin:0;padding:30px;font:12px/1.5 Helvetica,Arial,Verdana,sans-serif;}h1{margin:0;font-size:48px;font-weight:normal;line-height:48px;}strong{display:inline-block;width:65px;}</style></head><body><h1>404 Page Not Found</h1><p>The page you are looking for could not be found. Check the address bar to ensure your URL is spelled correctly. If all else fails, you can visit our home page at the link below.</p><a href="/PHP-Slim-Restful/api/">Visit the Home Page</a></body></html>" } signup.ts:36:6

JavaScript
 
Object { headers: {…}, status: 404, statusText: "Not Found", url: "http://localhost/PHP-SLIM-RESTFUL/API/signup", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://localhost/PHP-SLIM-RESTFUL/API/signup: 404 Not Found", error: "<html><head><title>404 Page Not Found</title><style>body{margin:0;padding:30px;font:12px/1.5 Helvetica,Arial,Verdana,sans-serif;}h1{margin:0;font-size:48px;font-weight:normal;line-height:48px;}strong{display:inline-block;width:65px;}</style></head><body><h1>404 Page Not Found</h1><p>The page you are looking for could not be found. Check the address bar to ensure your URL is spelled correctly. If all else fails, you can visit our home page at the link below.</p><a href="/PHP-Slim-Restful/api/">Visit the Home Page</a></body></html>" } signup.ts:36:6​

Answer

You can make use of Typescript’s async methods to make your life easier

Your postData method in async

AuthServiceProvider:

public async postData(credentials, type): Promise<any> {
    let headers = new HttpHeaders();
    await this.http.post(apiUrl + type, JSON.stringify(credentials), { headers: headers }).toPromise();
}

JavaScript
 
public async postData(credentials, type): Promise<any> {    let headers = new HttpHeaders();    await this.http.post(apiUrl + type, JSON.stringify(credentials), { headers: headers }).toPromise();}​

Signup page:

public async signUp(): void {
    try {
      // request successful
      this.responseData = await this.authServiceProvider.postData(this.userData, "signup");
      console.log(this.responseData);
      localStorage.setItem('userData', JSON.stringify(this.responseData));
    } 
    catch(e) {
      // some error occured, handle it here..
      console.log(e);
    }
}

JavaScript
 
public async signUp(): void {    try {      // request successful      this.responseData = await this.authServiceProvider.postData(this.userData, "signup");      console.log(this.responseData);      localStorage.setItem('userData', JSON.stringify(this.responseData));    }     catch(e) {      // some error occured, handle it here..      console.log(e);    }}​

Don’t forget to import toPromise operator in AuthServiceProvider

import 'rxjs/add/operator/toPromise';

JavaScript
 
import 'rxjs/add/operator/toPromise';​

Advertisement

Answer