168

当我发出 post 请求时，angular 2 http 未发送此请求

this.http.post(this.adminUsersControllerRoute, JSON.stringify(user), this.getRequestOptions())

http post 不会发送到服务器，但如果我发出这样的请求

this.http.post(this.adminUsersControllerRoute, JSON.stringify(user), this.getRequestOptions()).subscribe(r=>{});

这是有意的吗？如果有人可以解释我为什么？或者它是一个错误？

4

3 回答 3

275

由于该类的post方法Http返回一个可观察对象，因此您需要订阅它以执行其初始化处理。Observables 是惰性的。

您应该观看此视频以了解更多详细信息：

于 2016-03-24T19:43:01.447 回答
65

如果要执行调用，则必须订阅返回的 observable。

另请参阅以下角度文档“使用 HTTP 与后端服务通信”。

永远订阅！

在您调用该方法返回的可观察对象之前，该HttpClient方法不会开始其 HTTP 请求。subscribe()这适用于所有 方法。HttpClient

AsyncPipe会自动为您订阅（和取消订阅）。

HttpClient从方法返回的所有 observables 在设计上都是冷的。HTTP 请求的执行是deferred ，允许您在实际发生任何事情之前tap使用其他操作来扩展 observable 。catchError

调用subscribe(...)会触发 observable 的执行，并导致HttpClient编写 HTTP 请求并将其发送到服务器。

您可以将这些可观察对象视为实际 HTTP 请求的蓝图。

事实上，每个都subscribe()启动了一个单独的、独立的 observable 执行。订阅两次会产生两个 HTTP 请求。

const req = http.get<Heroes>('/api/heroes');
// 0 requests made - .subscribe() not called.
req.subscribe();
// 1 request made.
req.subscribe();
// 2 requests made.
于 2018-02-27T10:42:30.767 回答
43

Get 方法不需要使用 subscribe 方法，但 post 方法需要使用 subscribe。获取和发布示例代码如下。

import { Component, OnInit } from '@angular/core'
import { Http, RequestOptions, Headers } from '@angular/http'
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/catch'
import { Post } from './model/post'
import { Observable } from "rxjs/Observable";

@Component({
    templateUrl: './test.html',
    selector: 'test'
})
export class NgFor implements OnInit {

    posts: Observable<Post[]>
    model: Post = new Post()

    /**
     *
     */
    constructor(private http: Http) {

    }

    ngOnInit(){
        this.list()
    }

    private list(){
        this.posts = this.http.get("http://localhost:3000/posts").map((val, i) => <Post[]>val.json())
    }

    public addNewRecord(){
        let bodyString = JSON.stringify(this.model); // Stringify payload
        let headers      = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON
        let options       = new RequestOptions({ headers: headers }); // Create a request option

        this.http.post("http://localhost:3000/posts", this.model, options) // ...using post request
                         .map(res => res.json()) // ...and calling .json() on the response to return data
                         .catch((error:any) => Observable.throw(error.json().error || 'Server error')) //...errors if
                         .subscribe();
    }
}
于 2017-03-25T15:05:10.207 回答