Angular 2 http.post() не отправляет запрос

Ответ 1

Так как метод post класса Http возвращает наблюдаемый, вам необходимо подписаться, чтобы выполнить его обработку инициализации. Наблюдаемые ленивы.

Вы должны посмотреть это видео для получения более подробной информации:

• https://egghead.io/lessons/rxjs-rxjs-observables-vs-promises

Ответ 2

Вы должны подписаться на возвращаемую наблюдаемую информацию, если хотите, чтобы вызов выполнялся.

Смотрите также документацию Http.

Всегда подписывайтесь!

Метод HttpClient не начинает свой HTTP-запрос до тех пор, пока вы не вызовете subscribe() для наблюдаемой, возвращаемой этим методом. Это верно для всех методов HttpClient.

The AsyncPipe subscribes (and unsubscribes) for you automatically.

Все наблюдаемые, возвращаемые методами HttpClient, являются холодными. Выполнение HTTP-запроса откладывается, что позволяет расширить наблюдаемое дополнительными операциями, такими как tap и catchError, прежде чем что-либо действительно произойдет.

Вызов 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.

Ответ 3

Метод 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();
    }
}