向 api 发送 [object, Object] 的 Angular POST 请求答案

【问题标题】：Angular POST request to api sending [object, Object]向 api 发送 [object, Object] 的 Angular POST 请求
【发布时间】：2023-02-17 19:39:12
【问题描述】：

我正在尝试为我的应用程序创建一个功能，从订单中获取产品并将它们发送到购物车。所以基本上它会重复整个订单。

我成功收到订单，但无法使用 POST 方法将其发送回 API。

我在 cart.service.ts 文件中的 API 调用是：

  repeatOrder(products: SingleOrder['izdelki']) {
    return from(Preferences.get({key: 'TOKEN_KEY'})).pipe(
      switchMap(token => {
        const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
        const formData: any = new FormData();
        formData.append('products', products);
        return this.httpClient.post(`${environment.apiUrl}cart/repeatorder`, formData, {headers, observe: 'response'});
      }),
      catchError(err => {
        console.log(err.status);
        if (err.status === 400) {
          console.log('Error 400: ', err.error.message);
        }
        if (err.status === 401) {
          this.authService.logout();
          this.router.navigateByUrl('/login', {replaceUrl: true});
        }
        return EMPTY;
      }),
    );
  };

这是 order-view.page.ts 文件中的重复购买功能：

  repeatThisPurchase() {
    this.repeatOrderArr= [...this.orderProducts];

    this.cartService.repeatOrder(this.repeatOrderArr).subscribe(
      data => {
        console.log('Data sent to cart: ', data);
      },
      error => {
        console.log('Error', error);
      }
    );
  }

这是我用来触发此 repeatPurchase 功能的按钮：

<div class="btn-wrapper">
  <ion-button color="vigros" class="purchase-btn" size="default" type="submit" (click)="repeatThisPurchase()" expand="block">Ponovi nakup</ion-button>
</div>

我在浏览器的控制台中收到错误 500，网络选项卡中的有效负载是：产品：[object 对象],[object 对象],[object 对象],[object 对象],[object 对象],[object 对象],[object 对象],[object 对象],[object 对象],[object 对象] ]

我究竟做错了什么？

【问题讨论】：

你能显示 API 端点吗，因为那是错误所在，API 服务器说出了它所期望的错误

标签： javascript arrays angular typescript ionic-framework

【解决方案1】：

尽量不要使用formdata（formdata主要用于发送文件）

const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);

return this.httpClient.post(`${environment.apiUrl}cart/repeatorder`,{ products }, { headers });

你知道你的 api 期望什么作为请求正文吗？

【讨论】：

【解决方案2】：

查阅append的文档：

价值

字段的值。这可以是字符串或 Blob（包括 File 等子类）。如果未指定这些值，则该值将转换为字符串。

你有：
const formData: any = new FormData();
formData.append('products', products);
根据输出，products 是一个对象数组（因为逗号分隔的 [object Object] 列表是将此类事物转换为字符串时得到的）。

【讨论】：