Angular 2 http post 请求没有被调用答案

【问题标题】：Angular 2 http post request is not being called outAngular 2 http post 请求没有被调用
【发布时间】：2016-06-26 21:14:51
【问题描述】：

我正在使用 Angular 2 发出获取请求和发布请求。我的获取请求工作正常，但对于我的帖子，在检查我的 Firebug Net 面板时，我没有看到发出请求。

代码方法如下所示。我也有从组件类调用它们的订阅方法。

import {Injectable} from "angular2/core";
import {Http, Response, Headers, RequestOptions,  Jsonp, URLSearchParams} from "angular2/http";
import { Observable }     from 'rxjs/Observable';
import 'rxjs/add/operator/map'; 

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


testPost(){      

    var json = JSON.stringify({"userId": 111, "givenName": "CZ"});
    var body = "json="+json;
    var headers = new Headers({ 'Content-Type': 'application/json' });
    var options = new RequestOptions({ headers: headers });

    return this._http.post("http://mylocal.post.url", body, options)
        .map(this.extractData)
        .catch(this.handleError);

}

  private extractData(res: Response) {
    alert("test whether this method is reached");

    let body = res.json();
    return body.data || { };
  }

  private handleError (error: any) {
    alert("test whether this method is reached");

    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
  }     

 //testGet method is running well
testGet(link:string){

    return this._http.get(link)
    .map(res => res);

}     
}

我的订阅方法onTestPost()，分配给页面上的一个按钮。

onTestPost(){
    this.myService.testPost()
    .subscribe(
        data => this.getData = JSON.stringify(data),
        error => alert(error),
        () => console.log("Finished")            
        );
}

我在两个辅助方法的开头放置了一条警告语句。没有达到任何警报。而且在使用 Firebug 进行调试时，我没有看到对我的本地帖子 url 调用的任何请求。

虽然我的 testGet 方法可以正常工作，但我只是不知道 testPost 缺少什么。

【问题讨论】：

代码看起来不错，很可能您没有正确订阅。
以防万一，确保模拟后端之类的东西没有捕获请求。

标签： javascript angular observable

【解决方案1】：

我认为您的订阅方法是这里的问题。请确保调用了subscribe。

"这个 observable 是冷的，这意味着请求不会发出，直到有些东西订阅了 observable。”

见https://angular.io/docs/ts/latest/guide/server-communication.html

【讨论】：

感谢您的回复！
我已经添加了我的订阅方式。但是，我相信我的服务方法 testPost() 已被调用。我发出警告声明。它演示了 return 语句运行之前的代码。
我希望我早点看到这个回复。浪费了一整天的时间来挖掘问题。

【解决方案2】：

testPost() : Observable <Response> //import{Response} from '@angular/http'
{      
var json = JSON.stringify({"userId": 111, "givenName": "CZ"});
var headers = new Headers({ 'Content-Type': 'application/json' });
var options = new RequestOptions({ headers: headers });
return this._http.post("http://mylocal.post.url/api",JSON.stringify(json), options)
    .map((res:Response)=>res.json())
    .catch(this.handleError);
}

【讨论】：