在Angular中通过HTTPPOST发送对象

Question

我正在使用angular创建一个Web应用程序。现在，我的项目已经有了一个后端，一个前端和一个API Rest。在这种情况下，我试图将一个对象从前端的页面发送到前端的服务，如下所示：

async save_pack(index: any){
await this.usuarioService.save_pack(this.packs[index])
.then((data) => {
console.log(JSON.stringify(data));
})
.catch(err => alert(err));
}

然后，我使用HTTP POST将该对象从服务发送到API Rest，如下所示：

save_pack(Pack: any){
return this.http
.post("http://localhost:8000/save_pack",Pack)
.toPromise()
}

我在API Rest中的功能是：

app.post('/save_pack', async (req,res) => {
console.log("Elementos de la respuesta: " + req.body)
//const Pack = req.body.Pack;
let result = await save_pack(Pack);
res.send(result)
return res;
})

然而，当我试图检查对象是否正确传递时，我意识到它没有正确传递，因为我没有显示它的值(我得到Elementos de la respuesta：未定义(。我想我做错了，但我不知道怎么做，因为我是Angular的新手。知道吗？

Answer 1

来自文档

HttpClient服务对所有事务都使用可观察性。您必须导入示例代码段中出现的RxJS可观察符号和运算符符号。这些ConfigService导入是典型的。

这个：

save_pack(Pack: any){
return new Promise((resolve, reject) =>{
this.http
.post("http://localhost:8000/save_pack",Pack)
.subscribe(res => {
resolve(res);
},
(err: any) => {
reject(err);
}
)
});
}

应该是：

save_pack(Pack: any){
return this.http
.post("http://localhost:8000/save_pack",Pack)
.toPromise
});
}

然后你可以做这样的事情：

this.save_pack.then((data) => {
console.log(JSON.stringify(data));
})
.catch((error) => {
console.log("Promise rejected with " + JSON.stringify(error));
});

我从5个月起就在研究angular，所以我不是真正的专家，但我可以告诉你一件事：学习好的可观察性，只有在你做不到的情况下才使用promise和async/await模式，对于其他的可观察性，使用rxjs和状态管理，比如ngrx(反应式编程模式&redux模式(几乎涵盖了所有的用例，并且非常强大。好的编码！

Answer 2

您应该使用Observables而不是promise，因为Observables在整个Angular中都得到了很好的支持。

所以您的HTTPPOST方法应该是这样的

save_pack(Pack: any): Observable<any> {
return this.http.post("http://localhost:8000/save_pack",Pack);
}

然后您应该在组件中订阅该Observable

save_pack(index: any) {
this.usuarioService.save_pack(this.packs[index])
.subscribe(resp => {
console.log('resp');
});      
}