如何在 AngularJS 中使用 post 方法

Question

我是 Angular 世界的新手，在使用 http post 方法时遇到了一些问题。请帮我解决这个问题，谢谢！

为了让我的代码看起来更简单，我删除了不相关的内容。
背景：我使用 express 创建一个 localhost:8080，当数据被 post 发送到所述主机时，控制台将记录 'catching data'。我用 'Postman' 来测试这个主机，它确实有效。当我尝试在我的 Angular 代码中使用 post 方法时，它在控制台中没有给出任何响应。

import {Component} from '@angular/core';
import {Headers, Http, Response, Request, RequestOptions} from '@angular/http';
import {User} from './user';
import {UserService} from './user.service';

import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Component({

    selector: 'my-app',
    template:
    `
      ....
      <button type= "button" class="btn btn-primary btn-lg" 
      (click)= "addUser()">Login</button>
      ....

   `
})

export class AppComponent{
  user: User= {
    UserId: "",
    Password:""
  };

constructor(private userservice: UserService, private http: Http){};
hostUrl:string = "http://localhost:8080/SignIn";

addUser(){
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({headers: headers});
let body:string = JSON.stringify( {"UserId":"Jay","Password":"asfjghj123f"} ); 

this.http.post(this.hostUrl, body, options)
                     .map((res:Response) => res.json())
                     .catch((error:any) => Observable.throw(error.json().error || 'Server error'));

console.log('posting data...');
}   
}

这是我的 localhost8080 的 nodejs 代码

'use strict';

var express= require('express');
var app = express();
var signService = require('./signService.js');
var sessionRepo = require('./sessionRepo.js');

var bodyParser= require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({    
  extended: false
}));

app.post('/SignIn', function(req, res){
    console.log('catching data');
    res.send('hello');
});

此外，我对'Observable'的使用感到很困惑。我在官方教程中看到了示例代码，他们在 post 方法上使用了 Observable。为什么我们在 post 方法上 return 东西，我们不直接在那里 post 东西，我们得到的唯一东西就是这种请求的状态吗？

源代码：

  addHero (name: string): Observable<Hero> {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post(this.heroesUrl, { name }, options)
                    .map(this.extractData)
                    .catch(this.handleError);
  }

来自 https://angular.io/docs/ts/latest/guide/server-communication.html;

Answer 1

angular 中的 http 方法是 'cold' 方法。在您订阅返回的 Observable 之前，post 不会做任何事情。

所以让我们坚持英雄示例：

addHero (name: string): Observable<Hero> {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });

return this.http.post(this.heroesUrl, { name }, options)
                .map(this.extractData)
                .catch(this.handleError);

}

因此，如果您在某个地方调用该 addHero 函数，您实际上想要 post 某些东西（比如说一个提交按钮），您可以订阅可观察对象。而且只有这个订阅才会真正启动 post 方法：

调用组件（打字稿）：

public submit():void{
  this.heroService.addHero
  .subscribe(response -> console.log('My response: ' + response));
}

对应html-模板

<button (ngSubmit)="submit()"/>

如果您现在单击该按钮，将调用 submit() 函数，然后订阅包含 http.post().. 方法的函数返回的可观察对象。 Subscribe 关闭并提供 Observable 内容（在这种情况下是您的服务器响应）。

如何在 AngularJS 中使用 post 方法

How to use post method in AngularJS

angular-http

angular