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); }); }); } }
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(); } }
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
Advertisement
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(); }
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); } }
Don’t forget to import toPromise
operator in AuthServiceProvider
import 'rxjs/add/operator/toPromise';