Angular HttpClient post 请求类型

34 浏览
0 Comments

Angular HttpClient post 请求类型

官方的Angular HttpClient文档提供了以下示例，用于向某个后端服务器发送POST请求。

/** POST: 将新英雄添加到数据库 */

addHero (hero: Hero): Observable {

return this.http.post(this.heroesUrl, hero, httpOptions)

.pipe(

catchError(this.handleError('addHero', hero))

);

}

但我对Observable返回英雄数据或者其他数据而不是成功代码在POST请求中的原因感到困惑。我明白为什么GET请求会使用类型断言，但是对于这个工作原理还不太理解。

0

3 答案

0 Comments

Angular HttpClient post请求类型的问题的出现原因是，Web API通常接受POST请求并将创建的对象作为响应返回。这种后端行为在需要获取某些属性（例如ID、createdTime等）的情况下非常有用，这些属性只有在对象通过后端的POST请求创建后才可用。

解决方法是使用Angular HttpClient的post方法，并使用泛型参数来指定返回的数据类型。通过这样做，可以将响应的数据直接映射到指定的类型上，从而方便地获取所需的属性。

以下是一个示例代码，演示了如何使用Angular HttpClient的post方法并指定返回类型：

import { HttpClient } from '@angular/common/http';
// 在构造函数中注入HttpClient
constructor(private http: HttpClient) { }
// 定义一个接口，用于指定返回的数据类型
interface CreatedObject {
  id: number;
  createdTime: string;
  // 其他属性...
}
// 在需要发送POST请求的地方调用该方法
sendPostRequest() {
  const url = 'https://example.com/api/create'; // 替换为实际的API地址
  const data = {
    // 请求体数据...
  };
  // 发送POST请求，并指定返回类型为CreatedObject
  this.http.post(url, data)
    .subscribe(response => {
      // 在这里可以访问返回的属性
      console.log(response.id);
      console.log(response.createdTime);
      // 其他操作...
    });
}

通过以上代码，我们可以确保在发送POST请求后，能够直接获取到创建的对象的属性，从而更方便地进行后续操作。

更多关于此问题的信息，请参考https://stackoverflow.com/a/28951049/1608690。

0
0 Comments

Angular HttpClient的post请求类型问题的原因是在HeroesComponent中的addHero方法中，使用了.subscribe()方法来订阅addHero方法返回的Observable对象，以便在服务器返回英雄后将其添加到英雄数组中。

要解决这个问题，可以按照以下步骤进行操作：

1. 在HeroesComponent中，确保已正确注入heroes服务。这可以通过在组件的构造函数中添加以下代码来实现：

constructor(private heroesService: HeroesService) { }

2. 在组件的addHero方法中，调用heroesService的addHero方法，并使用.subscribe()方法来订阅返回的Observable对象。将返回的英雄添加到英雄数组中。示例代码如下：

this.heroesService.addHero(newHero)
  .subscribe(hero => this.heroes.push(hero));

通过按照上述步骤操作，可以解决Angular HttpClient的post请求类型问题，并确保正确将返回的英雄添加到英雄数组中。

0
0 Comments

问题出现的原因是因为不同的实现方式会导致POST请求的响应结果不同。具体而言，根据API的实现不同，POST请求的响应可能会包含一些默认值。这些默认值可能是数据库中设置的默认值，例如在创建一个名为"Hero"的对象时，数据库会自动设置"createDate"字段的默认值。在Angular应用程序中，如果想要获取这些默认值，就需要从API中发送Hero数据。

根据文档的实现方式，他们使用的是模拟API。如果你在控制台打印出响应结果，你会看到状态码是204。默认情况下，状态码为204时，不会返回响应体。但是，如果你配置了模拟服务，如下所示：

HttpClientInMemoryWebApiModule.forRoot(InMemHeroService, {put204: false, post204: false})

那么你将会得到一个状态码为200的响应，并且响应体将包含Hero对象的数据。

解决方法就是根据具体的需求来配置模拟服务，以便正确地获取POST请求的响应结果。

0