角度4 http.post不发送或工作

Question

我是Angular的最新版本的新手。 http.post似乎无法在我的应用程序中的任何地方工作。我已经尝试了诸如：

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

......或者......

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

......或者......

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

当我在浏览器中运行这是几乎像剧本不在那里。我没有看到检查员的要求。我正在使用Angular CLI

Answer 1

我的错误。我一直在关注一个教程，其中包含一个用于测试的虚假后端脚本，它已影响到所有请求。

为防万一某人遇到同样的问题或者一直关注本教程， http://jasonwatmore.com/post/2016/08/16/angular-2-jwt-authentication-example-tutorial确保禁用假后端。

我只是删除这些提供者;

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

Answer 2

这就是我在我的Ionic 3应用程序中所做的工作。

//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

是您的http正确实例化了吗？试试下面的方法请，它的工作原理是肯定的：

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

如果仍然没有工作，你的数据可能是错误，像this.config，用户名，密码......所有有效？

Answer 4

我们通常做的其他错误是我们忘记从@ angular/http导入头文件。它不会给出任何错误，但请求不起作用。请尝试导入标题为 import {Headers, Http} from '@angular/http';