我正在使用Angular 4学习Node.JS。我为简单的GET / POST请求构建了一个示例Node API。我的GET操作工作正常，我能够在Angular中获取数据。我的OST操作根本没有从Angular调用。如果我使用Postman，我可以成功调用POST，数据也会插入数据库中。
以下是Node POST的示例代码：
app.post('/groups', function (req, res, next){
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");
res.header("Access-Control-Allow-Methods", "GET, POST","PUT");
console.log('Request received with body' + req.body);
//DEV AWS MySQL
var mysql = require('mysql');
var connection = mysql.createConnection({
host : 'xxxxxxx',
user : 'xxxxxxx',
password : 'xxxxxxx',
database : 'xxxxxxx',
port : 3306
});
connection.connect();
connection.query('CALL storedprocedure(?, ?, ?, ?, ?, ?)', [req.body.group_avatar_image,req.body.name,req.body.display_name,req.body.unique_id,req.body.description,req.body.adzone], function (err, results, fields){
if (err)
res.send(results);
//res.status(201).send("Groups created successfully");
res.status(201).send(results[0]);
});
这对Postman很好，我得到201.
这是我的Angular 4代码：
import { Injectable } from '@angular/core';
import { Http, Response,RequestOptions, Request, RequestMethod, Headers} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import { Group } from './group';
@Injectable()
export class GroupsService{
private _GroupsUrl = 'http://localhost:5000/api/groups';
constructor(private _http: Http){};
getGroups(): Observable<Group[]> {
let headers = new Headers({ 'Content-Type': 'application/json' });
headers.append('Accept', 'application/json');
headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, DELETE, PUT');
headers.append('Access-Control-Allow-Origin', '*');
//headers.append('Access-Control-Allow-Headers', "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding");
let options = new RequestOptions({ method: RequestMethod.Post, headers: headers, url:this._GroupsUrl });
//debugger;
return this._http.get(this._GroupsUrl)
.map((Response: Response) => <Group[]>Response.json()[0])
//.do(data => console.log ('ALL: ' + JSON.stringify(data)))
.catch(this.handleError);
}
CreateGroup(GroupM): Observable<string>{
let headers = new Headers({ 'Content-Type': 'application/json' });
headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, DELETE, PUT, OPTIONS');
headers.append('Access-Control-Allow-Origin', 'http://localhost:4200');
headers.append('Access-Control-Allow-Headers', "X-Requested-With, Content-Type");
//let options = new RequestOptions({ method: RequestMethod.Post, headers: headers, body:JSON.stringify(GroupM), url:this._GroupsUrl });
let options = new RequestOptions({ method: RequestMethod.Post});
console.log('Calling ' + this._GroupsUrl + ' with body as :' + JSON.stringify(GroupM) + ' and request options are : ' + JSON.stringify(options));
var req = new Request(options.merge({
url: this._GroupsUrl
}));
debugger;
//return this._http.post(this._GroupsUrl,GroupM)
return this._http.post(req.url,JSON.stringify(GroupM),options)
.map(res => res.json())
.do(data => console.log ('ALL: ' + JSON.stringify(data)))
.catch(this.handleError);
}
private handleError(error:Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server Error');
}
}
这里有什么问题？
答案 0 :(得分：4)
最后能够使用promise解决它并解决问题。不确定observable究竟是什么问题。
> CreateGroup(GroupObj:Group) : Promise<Group>{
return this._http
.post(this._GroupsUrl,JSON.stringify(GroupObj),{headers: this.headers})
.toPromise()
.then(res => res.json().data as Group)
.catch(this.handleError);
}
答案 1 :(得分：2)
首先，帮自己一个忙，并包装Angular的Http服务，这样您就不必为每个请求手动添加身份验证令牌和标头。这是一个可以构建的简单实现：
首先，让我们创建一个Cookies服务，作为不支持localStorage的后备服务：
@Injectable()
export class Cookies {
public static getItem(sKey) {
if (!sKey) {
return null;
}
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
}
public static setItem(sKey?, sValue?, vEnd?, sPath?, sDomain?, bSecure?) {
if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) {
return false;
}
let sExpires = '';
if (vEnd) {
switch (vEnd.constructor) {
case Number:
sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
break;
case String:
sExpires = "; expires=" + vEnd;
break;
case Date:
sExpires = "; expires=" + vEnd.toUTCString();
break;
}
}
document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
return true;
}
public static removeItem(sKey, sPath?, sDomain?) {
if (!this.hasItem(sKey)) {
return false;
}
document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
return true;
}
public static hasItem(sKey) {
if (!sKey) {
return false;
}
return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
}
public static keys() {
let aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
for (let nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) {
aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]);
}
return aKeys;
}
}
然后是一个存储记录器，用于跟踪添加到存储中的内容（对于更改每个请求时更新身份验证令牌非常有用）：
import {Cookies} from '@services/cookies.service';
@Injectable()
export class StorageLogger {
private logger = new BehaviorSubject<any>(null);
public logger$ = this.logger.asObservable();
set(key: string, value: any): void {
try {
localStorage.setItem(key, JSON.stringify(value));
}
catch(err) {
Cookies.setItem(key, JSON.stringify(value));
}
this.get(key);
}
get(key: string) {
let item: any;
try {
item = JSON.parse(localStorage.getItem(key));
}
catch(err) {
item = JSON.parse(Cookies.getItem(key));
}
this.logger.next({value: item, key: key});
}
remove(keys: string[]) {
try {
for (const key of keys) {
localStorage.removeItem(key);
this.logger.next({value: null, key: key});
}
}
catch(err) {
for (const key of keys) {
Cookies.removeItem(key);
this.logger.next({value: null, key: key});
}
}
}
}
然后你要包装角度Http：
@Injectable()
/* Wrapper for Angular's Http class, let's us provide headers and other things on every request */
export class HttpClient implements OnDestroy {
constructor(
private http: Http,
private storageLogger: StorageLogger
) {
this.getToken();
this.storageSubscription = this.storageLogger.logger$.subscribe(
(action: any) => {
if (action && action.key === tokenIdKey) {
this.getToken();
}
}
);
}
private storageSubscription: Subscription;
private token: string;
ngOnDestroy() {
this.storageSubscription.unsubscribe();
}
getToken(): void {
try {
this.token = localStorage.getItem(tokenIdKey);
}
catch(error) {
this.token = Cookies.getItem(tokenIdKey);
}
}
convertJSONtoParams(json: any): URLSearchParams {
const params: URLSearchParams = new URLSearchParams();
for (const key in json) {
if (json.hasOwnProperty(key) && json[key]) {
if (json[key].constructor === Array && !json[key].length) {
continue;
}
else {
params.set(key, json[key]);
}
}
}
return params;
}
getRequestOptions(params?: any): RequestOptions {
const headers = new Headers();
// headers.append('Content-Type', 'application/x-www-form-urlencoded');
headers.append('Content-Type', 'application/json');
this.createAuthorizationHeader(headers);
return new RequestOptions({
headers: headers,
search: params ? this.convertJSONtoParams(params) : null
});
}
createAuthorizationHeader(headers: Headers): void {
headers.append('Authorization', this.token);
}
checkResponseStatus(err: any) {
if (err.status === 401) {
// If we want we can redirect to login here or something else
}
return Observable.of(err);
}
get(url: string, params?: any): Observable<Response> {
const options: RequestOptions = this.getRequestOptions(params);
return this.http.get(host + url, options).catch((err: Response) => this.checkResponseStatus(err));
}
post(url: string, data: any, params?: any): Observable<Response> {
const options: RequestOptions = this.getRequestOptions(params);
return this.http.post(host + url, data, options).catch((err: Response) => this.checkResponseStatus(err));
}
put(url: string, data: any, params?: any): Observable<Response> {
const options: RequestOptions = this.getRequestOptions(params);
return this.http.put(host + url, data, options).catch((err: Response) => this.checkResponseStatus(err));
}
delete(url: string, params?: any): Observable<Response> {
const options: RequestOptions = this.getRequestOptions(params);
return this.http.delete(host + url, options).catch((err: Response) => this.checkResponseStatus(err));
}
patch(url: string, data: any, params?: any): Observable<Response> {
const options: RequestOptions = this.getRequestOptions(params);
return this.http.patch(host + url, data, options).catch((err: Response) => this.checkResponseStatus(err));
}
head(url: string, params?: any): Observable<Response> {
const options: RequestOptions = this.getRequestOptions(params);
return this.http.head(host + url, options).catch((err) => this.checkResponseStatus(err));
}
options(url: string, params?: any): Observable<Response> {
const options: RequestOptions = this.getRequestOptions(params);
return this.http.options(host + url, options).catch((err: Response) => this.checkResponseStatus(err));
}
}
最后，您还应该添加一个通用的api服务，而不是为应用程序的每个部分创建新服务。这将为您节省大量代码和工作量。这是：
import {IResponse} from '@interfaces/http/response.interface';
import {HttpClient} from '@services/http/http-client.service';
@Injectable()
export class AppApi {
constructor(private http: HttpClient) {}
get(url: string, params?: any): Observable<IResponse> {
return this.http.get(url, params)
.map((res: Response) => res.json() as IResponse)
.catch((error: any) => {
return Observable.throw(error.json().error || 'Server error');
}
);
}
post(url: string, data: any, params?: any) {
return this.http.post(url, data, params)
.map((res: Response) => res.json() as IResponse)
.catch((error: any) => {
return Observable.throw(error.json().error || 'Server error');
}
);
}
put(url: string, data: any, params?: any) {
return this.http.put(url, data, params)
.map((res: Response) => res.json() as IResponse)
.catch((error: any) => {
return Observable.throw(error.json().error || 'Server error');
}
);
}
delete(url: string, params?: any): Observable<IResponse> {
return this.http.delete(url, params)
.map((res: Response) => res.json() as IResponse)
.catch((error: any) => {
return Observable.throw(error.json().error || 'Server error');
}
);
}
}
您会注意到我还创建了一个界面，可以从后端输入我的响应，通常类似于：
{error: any; data: any; results: number; total: number;}
现在我们已经解决了这些问题，让我们解决您原来的问题。最有可能导致您的请求无法运行的原因是您未订阅http可观察对象。 Observable是懒惰的，所以如果你不通过.subscribe或@ngrx/effects订阅它，它就不会做任何事情。
因此，我们假设您正在调用此类CreateGroup：
this.groupsService.CreateGroup(data);
在您订阅之前，这不会做任何事情：
this.groupsService.CreateGroup(data).subscribe(() => {
// Here you can react to the post, close a modal, redirect or whatever you want.
});
我还建议在api调用中添加.first()，因为这样可以避免在组件被销毁时手动取消订阅observable。
因此，要使用上述实现，您只需执行以下操作：
constructor(private appApi: AppApi) {}
...
this.appApi.post('/groups').first().subscribe(() => {
// Do something
});
我希望这有用。
答案 2 :(得分：0)
不要在HTTP POST中对POST数据进行字符串化。简单地传递对象。