Ionic 3 Uncaught (en promesa):

Soy nuevo en Ionic 3 y desarrollo móvil. Estoy tratando de conectar una base de datos MySQL a mi aplicación Ionic y una API de PHP Restful. Probé la API con Postman y está funcionando bien. Para implementarla en Ionic, hice lo siguiente, primero hice un proveedor llamado 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); }); }); } } 

Y una página de registro:

 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(); } } 

Cuando se ejecuta esto, aparece un error No detectado (en promesa): [objeto Objeto] como se puede ver aquí.


ACTUALIZAR

Ahora estoy recibiendo el siguiente 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: "404 Page Not Foundbody{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;}

404 Page Not Found

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.

Visit the Home Page" } signup.ts:36:6

Puedes hacer uso de los métodos async de async para hacer tu vida más fácil

Su método postData en async

AuthServiceProvider:

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

Página de registro:

 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); } } 

No olvide importar toPromise operador AuthServiceProvider en AuthServiceProvider

 import 'rxjs/add/operator/toPromise'; 
 postData(credentials, type) { let headers = new HttpHeaders(); return this.http.post(apiUrl + type, JSON.stringify(credentials), { headers: headers }); } 

esto volverá observable en la página de registro, simplemente suscríbase.