Angular 12：我可以使用 HttpClient 处理来自 API 的多种类型的响应吗？

Question

下面有这段代码，正如您所看到的，它只是检查 API 的响应是否正常并返回一个值或抛出一个我可以捕获的错误。

fetch(`http://localhost:9000/api/test`, {
   method: "post",
   body: JSON.stringify({ "data": my_payload })
})
.then(response => {
  if (response.ok) {
    return response.json();
  }

  throw response;
})
.then(data => data)
.catch(err => err);

我只是尝试开始使用 HTTPClient 发送相同的 API 请求，如下面的代码所示：

this.http.post('http://localhost:9000/api/test',
{ "data": my_payload })
.pipe(
  catchError(err => throwError(() => err))
);

问题是，当所有进程运行正常时，API 会以 JSON 进行响应，但当发生错误时，API 会抛出一个错误，并用纯文本描述错误发生的原因。

所以我在控制台上收到了此日志：

TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, ReadableStream, Array, AsyncIterable, or Iterable.

即使我尝试添加属性

responseType: "text"

，错误仍然存在：

this.http.post('http://localhost:9000/api/test',
{ "data": my_payload }, { responseType: "text" })
.pipe(
  catchError(err => throwError(() => err))
);

我真的不知道该如何处理这种情况。我尝试寻找一些答案，基本上，我发现错误可能出现在

responseType

中，或者错误可能出现在

RXJS

的版本中，顺便说一句，它位于 7.5.0 中 甚至其他涉及制作

interceptors class

的解决方案，但在我的情况下，它只会改变发生错误的位置。

你知道问题出在哪里吗？ 你以前有过这样的经历吗？

我不敢相信这是一门火箭科学，所以你能帮我找到解决方案吗？

Answer 1

您可以使用 rxjs 的

map

运算符来验证响应并手动抛出错误，使用

throw new Error(<<error message>>)

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { HttpClient, provideHttpClient } from '@angular/common/http';
import 'zone.js';
import { map, mergeMap } from 'rxjs/operators';
import { of, throwError } from 'rxjs';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>
  `,
})
export class App {
  name = 'Angular';

  constructor(private http: HttpClient) {}

  ngOnInit() {
    const my_payload = {};
    this.http
      .post<any>('https://65b332e3770d43aba4796a03.mockapi.io/test/test', {
        data: my_payload,
      })
      .pipe(
        map((res) => {
          if (res.status) {
            // change this to true to check its working, if API does not work, just set it to true manually!
            return res;
          } else {
            throw new Error('Valid token not returned' + JSON.stringify(res));
          }
        })
      )
      .subscribe(<any>{
        next: (res: any) => {
          console.log('next', res);
        },
        error: (res: Error) => {
          console.log('error', res.message);
        },
        complete: (res: any) => {
          console.log('complete', res);
        },
      });
  }
}

bootstrapApplication(App, {
  providers: [provideHttpClient()],
});

堆栈闪电战