带有 json-server 的 Angular 7 - 如何检索发布响应中返回的 id？

Posted 2023-03-27

【中文标题】带有 json-server 的 Angular 7 - 如何检索发布响应中返回的 id？

【英文标题】：Angular 7 with json-server - how do you retrieve the id returned in a post response?

【发布时间】：2019-08-24 07:56:50

【问题描述】：

使用以下 http 选项：

const httpOptions: any = 
  headers: new HttpHeaders(
    'Content-Type': 'application/json'
  ),
  observe: 'response'
;

我正在向 json-server 端点发送一个 http 帖子，如下所示：

return this.http.post(`$this.baseUrl/events`, myEvent, httpOptions);

订阅帖子的代码如下：

this.api.saveEvent(this.event).subscribe(data => 
  // Need to pick up the id from data (HttpResponse) here
);

我可以看到订阅中返回的data 是HttpResponse 类型 - 投射data 的正确方法是什么，以便我可以访问响应的body 属性并获取@987654330 json-server返回的@属性？

更新：根据下面的 cmets，我最终得到了返回 Observable<HttpRespponse<Event>> 的 saveNewEvent 方法，但是这只有在我将 http 选项作为内联匿名对象传递时才有效。在 const 中设置选项并在 post 方法中引用该 const 不起作用，我还没有弄清楚原因。有什么想法吗？

【问题讨论】：

能否请您发布服务器的实际响应，以便我们看到需要处理的返回数据。

【参考方案1】：

当您指定可以获取数据的类型时，只需确保您的 API 正确返回它即可。

return this.http.post<id: Number>(`$this.baseUrl/events`, myEvent, httpOptions);

this.api.saveEvent(this.event).subscribe(data => 
  console.log(data.id);
);

【讨论】：

试过这个会导致编译错误：Property 'id' does not exist on type 'Object' - 你还需要在订阅中转换data吗？

取得了一些进展 - 如果我使用内联匿名类型为选项调用 post 方法：return this.http.post<Event>('$this.baseUrl/events', event, observe: 'response');，那么我可以从我的 api 服务返回 Observable<HttpResponse<Event>>，并且我的组件可以在何时访问 data.body.id订阅响应。

但是，如果我像这样在 const 匿名类型中设置选项：const options: any = observe: 'response' ; 然后调用 post 方法：return this.http.post<Event>('$this.baseUrl/events', event, options); 然后我得到 Type 'HttpEvent<Event>' is not assignable to type 'HttpResponse<Event>'. 那么传递选项的方式有什么区别?

在我的示例中，来自服务器的响应将是 JSON 响应，类似于 "id": 123 。通过将类型设置为如上所述。它会自动映射到 json 到 object/id。对我来说，您还可以删除 observe: 'response' 声明。据我介绍，混合了 angular 和 nodejs 的概念（在 nodejs 中，您在处理 json 时使用 req 和 body）。

httpclient.post() 方法返回一个 HttpResponse 的实例，它有一个 body 属性。这是一个 Angular 类 - 你如何看待它混合了 Angular 和 Node？​​span>