eckig 4 ​​http.post nicht senden oder arbeiten

Question

Ich bin ziemlich neu in der neuesten Version von Angular. http.post scheint nirgendwo in meiner Anwendung zu funktionieren. Ich habe versucht, Dinge wie:

this.http 
    .post(this.bikesUrl, data, { headers: this.headers }) 
    .toPromise() 
    .then(res => res.json().data) 
    .catch(this.handleError); 

... oder ...

this.http.post(this.config.apiEndpoint+'/authenticate', JSON.stringify({ username: username, password: password })) 
     .map((response: Response) => { 
      // login successful if there's a jwt token in the response 
      let token = response.json() && response.json().token; 
      if (token) { 
       // set token property 
       this.token = token; 

       // store username and jwt token in local storage to keep user logged in between page refreshes 
       localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token })); 

       // return true to indicate successful login 
       return true; 
      } else { 
       // return false to indicate failed login 
       return false; 
      } 
     }).subscribe(result => { 
     if (result === true) { 
     // login successful 
     this.router.navigate(['/']); 
     } else { 
     // login failed 
     this.error = 'Username or password is incorrect'; 
     this.loading = false; 
     } 
    }) 

... oder ...

var json = {var1: 'test'}; 
var params = 'json='+json; 
let headers = new Headers(); 
headers.append('Content-Type', 'application/json'); 
http.post("http://example.com/infoarray.php", params, headers).subscribe (re => { 
    console.log(re) 
}) 

Als ich dies im Browser ausgeführt ist fast wie das Skript ist nicht da. Ich sehe keine Anfragen im Inspektor. Ich benutze Angular CLI

Answer 1

Mein Fehler. Ich habe ein Tutorial verfolgt, das ein falsches Backend-Skript zum Testen enthielt, das alle Anfragen beeinflusst hat.

Nur für den Fall, dass jemand das gleiche Problem hat oder diesem Tutorial folgt; http://jasonwatmore.com/post/2016/08/16/angular-2-jwt-authentication-example-tutorial stellen Sie sicher, das gefälschte Backend zu deaktivieren.

Ich habe diese Anbieter einfach entfernt;

import { fakeBackendProvider } from './_helpers/fake-backend'; 
import { MockBackend, MockConnection } from '@angular/http/testing'; 
import { BaseRequestOptions } from '@angular/http'; 

Answer 2

Dies ist, was ich in meiner Ionic 3 App mache.

//in my ApiProvider 

let headers = new Headers({ 'Content-Type': 'application/json' }); 
let options = new RequestOptions({ headers: headers }); 

http.post("http://localhost/login", params, options) 
    .map(this.onLoginSuccess) 
    .catch(this.onError); 

onLoginSuccess(res: Response): Observable<LoginUserResponse> { 
return res.json(); 
} 

private onError(error: Response | any) { 
    console.error(error.message || error); 
    return Observable.throw(error.message || error); 
} 

Answer 3

ist Ihr http ordnungsgemäß instanziiert? versuchen unten Methode bitte, es funktioniert sicher:

import {Injectable} from '@angular/core'; 
import {Http, Response} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 

@Injectable() 
export class MyService { 
    constructor(private http: Http) {} 

    // Post 
    MyPost() { 
     this.http.post(.....); 
     } 
    } 

Wenn immer noch nicht funktioniert, sind Ihre Daten möglicherweise Fehler, wie this.config, Benutzername, Passwort ... alle gültig?

Answer 4

Andere Fehler, die wir im Allgemeinen tun, ist vergessen wir Header aus @ angular/http zu importieren. Es wird kein Fehler angezeigt, aber Anfragen funktionieren nicht. Bitte versuchen Header zu importieren wie import {Headers, Http} from '@angular/http';