角2 http.post()不发送请求

问题描述 投票:94回答:3

当我使POST请求的角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=>{});

这是预期的,如果它是能有人解释我为什么?或者它是一个错误吗?

angular angular2-http
3个回答
185
投票

由于post类的Http方法返回一个可观察的,你需要订阅它,执行它的初始化处理。观测是懒惰。

你应该看看这个视频了解更多详情:


37
投票

如果你想调用执行,您必须订阅返回观测。

又见Http documentation

始终订阅!

直到调用订阅()上观察到的由该方法返回一个HttpClient方法不开始其HTTP请求。这是所有HttpClient方法一样。

AsyncPipe订阅(和取消)为您自动。

HttpClient方法返回的所有观测值都被设计冷。 HTTP请求的执行被推迟,让您可观察到的延长与诸如什么实际发生之前tapcatchError额外的操作。

主叫subscribe(...)触发可观察到的执行,并且使HttpClient撰写和发送该HTTP请求到服务器。

你可以把这些作为可观察蓝图实际HTTP请求。

事实上,每个subscribe()发起观察到的分离的,独立执行。订阅两次导致两个HTTP请求。

content_copy
const req = http.get<Heroes>('/api/heroes');
// 0 requests made - .subscribe() not called.
req.subscribe();
// 1 request made.
req.subscribe();
// 2 requests made.

35
投票

获取方法不需要使用订阅方法,但POST方法需要订阅。 GET和POST示例代码如下。

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();
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.