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

144

Когда я делаю почтовый запрос, angular 2 http не отправляет этот запрос

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

сообщение http не отправляется на сервер, но если я сделаю такой запрос 

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

Это предназначено, и если это так, может кто-нибудь объяснить мне, почему? Или это баг?

angular angular2-http Нику
источник

Ответы:

231

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

Вы можете посмотреть это видео, чтобы узнать больше:

Тьерри Темплиер
источник
16
@Thiery Не могу смотреть видео, так как оно только для участников
Татарин
53

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

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

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

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

В AsyncPipe выписывает (и отписывается) для вас автоматически.

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

Вызов subscribe(...)запускает выполнение наблюдаемого и заставляет HttpClientсоставить и отправить HTTP-запрос на сервер.

Вы можете рассматривать эти наблюдаемые как схемы реальных HTTP-запросов.

Фактически, каждый subscribe()запускает отдельное независимое выполнение наблюдаемого. Двойная подписка приводит к двум HTTP-запросам.

const req = http.get<Heroes>('/api/heroes');
// 0 requests made - .subscribe() not called.
req.subscribe();
// 1 request made.
req.subscribe();
// 2 requests made.
Игорь
источник
41

Метод Get не требует использования метода subscribe, но метод 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();
    }
}
Мурат ОНЕР
источник