HTTP post 请求不断发送空正文答案

【问题标题】：HTTP post request keeps sending an empty bodyHTTP post 请求不断发送空正文
【发布时间】：2019-02-03 15:22:10
【问题描述】：

我正在向我的服务器发送一个发布请求，从服务器端，我只得到一个空的正文。

我的客户是有角的。

这是发送请求的服务的代码：

public constructor(private http: HttpClient) { }

  public addImagePair(gameName: string, originalImage: File, modifiedImage: File): Observable<ICommonImagePair> {
    const formData: FormData = new FormData();
    formData.append("name", gameName);
    formData.append("originalImage", originalImage);
    formData.append("modifiedImage", modifiedImage);

    new Response(formData).text().then(console.log);
    return this.http.post<ICommonImagePair>(this.BASE_URL + "image-pair", formData);
  }

  public addGameCard(gameName: string, imagePairId: string, pov: POVType): Observable<ICommonGameCard> {
    const formData: FormData = new FormData();
    formData.append("name", gameName);
    formData.append("image-pair-id", imagePairId);
    formData.append("pov", "Simple");

    new Response(formData).text().then(console.log);
    return this.http.post<ICommonGameCard>(this.BASE_URL + "gamecard", formData);
  }

这是调用服务的组件的代码：

public addImagePair(): void {
    this.simplePOVGameGeneratorService.addImagePair(this.gameName, this.originalImageFile, this.modifiedImageFile)
      .subscribe((imagePair: ICommonImagePair) => {
        this.simplePOVGameGeneratorService.addGameCard(imagePair.name, imagePair.id, POVType.Simple)
          .subscribe((gameCard: ICommonGameCard) => {
            console.log(gameCard);
          });
      });
  }

在我的组件中，我首先向addImagePair() 发出请求，它确实会毫无问题地发送请求。然后，我用几乎相同的代码调用addGameCard()，但不知何故，正文是空的。我在发出请求之前控制台日志以确保确实有数据。我还在服务器上控制台登录，正文为空。这到底是什么原因造成的？

【问题讨论】：

你为什么用new Response(formData).text().then(console.log);，试试把这行去掉，用return this.http.post<ICommonImagePair>(this.BASE_URL + "image-pair", JSON.stringify(formData));
@Niladri 感谢您的回复。我使用第一行是因为我想打印我从客户端发送的内容，以确保它不为空，但事实并非如此。我也尝试添加 JSON.stringify() 并没有改变任何东西。
你在subscribe((imagePair: ICommonImagePair) => {的第一次订阅中尝试使用console.log(imagePair)
@Niladri 是的，它按预期返回了对象。在进行了一些挖掘之后，似乎 FormData 可能存在字符串问题。是否有可能在表单数据中附加字符串会搞砸？
这可能是个问题..尝试像这样使用它.. formdata = { "name":gameName,"image-pair-id":imagePairId,"pov": "Simple"} 然后使用return this.http.post<ICommonImagePair>(this.BASE_URL + "image-pair", JSON.stringify(formData));

标签： angular typescript http

【解决方案1】：

您可以使用flatMap 运算符，而不是像下面那样手动订阅嵌套的 observables -

public addImagePair(): void {
    this.simplePOVGameGeneratorService.addImagePair(this.gameName, this.originalImageFile, this.modifiedImageFile)
      .flatMap((imagePair: ICommonImagePair) => this.simplePOVGameGeneratorService.addGameCard(imagePair.name, imagePair.id, POVType.Simple))
       .subscribe((gameCard: ICommonGameCard) => {
            console.log(gameCard);
          });
      });
  }

您也可以将 post 方法中的数据作为字符串字面量传递，而不是像 formdata = { "name":gameName,"image-pair-id":imagePairId,"pov": "Simple"} 那样将 FormData 传递，然后在 addGameCard 方法中使用 return this.http.post<ICommonImagePair>(this.BASE_URL + "image-pair", JSON.stringify(formData));。

【讨论】：