Question

我对Angular世界相当新，我在使用http post方法时遇到了一些问题。请帮帮我，谢谢！

为了让我的代码看起来更容易，我删除了无关紧要的东西背景：我使用express来创建localhost：8080，当数据发布到所述主机时，控制台将记录“捕获数据”。我使用'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方法上返回东西，难道我们不直接在那里发布东西，我们唯一得到的就是这种请求的状态？

源代码：

  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方法是'冷'方法。在您订阅返回的Observable之前，帖子不会做任何事情。

所以让我们坚持英雄的例子：

addHero

}

因此，如果您在某个地方调用public submit():void{ this.heroService.addHero .subscribe(response -> console.log('My response: ' + response)); }函数实际发布某些内容（比如提交按钮），则可以订阅observable。只有这个订阅实际上会启动post方法：

调用组件（打字稿）：

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

对应的html-template

<meta charset>

如果现在单击该按钮，将调用submit（）函数，然后订阅包含http.post（）..方法的函数返回的observable。 Subscribe接受一个闭包并提供Observable内容（在这种情况下你的服务器响应）。

如何在AngularJS中使用post方法

1 个答案: