在 Angular 中通过 HTTP POST 发送对象

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: undefined）。我想我做错了，但我不知道该怎么做，因为我是 Angular 的新手。有什么想法吗？

Answer 1

来自文档

HttpClient 服务对所有事务都使用可观察对象。您必须导入示例 sn-ps 中出现的 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，所以我不是真正的专家，但我可以告诉你一件事：学习好 observables，只有在你不能这样做时才使用 promise 和 async/await 模式，其余的带有 rxjs 和状态管理的 observables，比如 ngrx(reactive programming pattern & redux patterm) 几乎涵盖了所有用例，并且非常强大。编码不错！

Answer 2

您应该使用 Observables 而不是 promises，因为整个 Angular 都很好地支持 Observables。

所以你的 HTTP POST 方法应该是这样的

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');
      });      
  }