Angular 2 Http.Post没有发送请求

问题描述：

试图做一个简单的POST到我的服务器，用一些数据并让它返回一些JSON数据。（目前，它贯穿于呼叫，但我什么也看不到我的网络选项卡上，它实际上试图使它？）Angular 2 Http.Post没有发送请求

我的服务（api.service.ts）

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

 
// Import RxJs required methods 
 
import 'rxjs/add/operator/map'; 
 
import 'rxjs/add/operator/catch'; 
 

 
@Injectable() 
 
export class ApiService { 
 

 
\t private headers = new Headers({'Content-Type': 'application/json'}); 
 
    \t private myUrl = 'https://www.mywebsite.com'; // URL to web api 
 
    \t private payLoad = {"thingy1":"Value1", "thingy2":"value2"}; 
 

 
    \t constructor(private http:Http) { } 
 

 
    \t getData() { 
 
     this.http.post(this.myUrl, JSON.stringify(this.payLoad), this.headers) 
 
     \t .map((res:Response) => res.json()) 
 
      .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
 
    } 
 

 
}

然后，我只是将getData方法运行在标题组件中，以便引发它。（header.component.ts）

import { Component, OnInit } from '@angular/core'; 
 

 
//Service 
 
import { ApiService } from '../services/api.service'; 
 

 

 
@Component({ 
 
    selector: 'app-header', 
 
    templateUrl: './header.component.html', 
 
    styleUrls: ['./header.component.scss'] 
 
}) 
 

 
export class HeaderComponent implements OnInit { 
 

 
    constructor(private service:ApiService) { 
 
    this.service.getData(); //Fire getData from api.service 
 
    } 
 

 
    ngOnInit() { } 
 

 
}

答

可观察懒惰，即使你初始化它们，它们不会被执行。至少有一个用户必须明确subscribe那个观察者来听该流。简而言之：只有在您订阅它时才会执行它们。

this.service.getData().subscribe(
    (data) => console.log(data) 
);

这做到了，我当然不得不添加回GetData方法。男人......一整天都在认真地对待这件事。不知道为什么我只是先来堆栈..非常感谢！ – Starboy

@Starboy不用担心，这发生在我们（开发），谢谢:) –

答

确保您正在订阅您的可观察数据。 RxJS观察员有2个部分，

next（） - 它推动由角本身完成的数据。
订阅 - 您需要在您的组件中从observable获取数据。

试试下面

this.service.getData().subscribe(
    (data) => { 
    //process your data here 
    } 
);

如何从observable中获取数据，并再次发送为可观察。一旦我们订阅，返回类型会改变。 –

你可以使用.map（）然后返回。它会得到数据并保持返回类型可观察。 –

Angular 2 Http.Post没有发送请求

相关推荐