Angular 如何识别多个可观察回报类型

我调用了一个API来获取产品列表。但是，如果出现错误，我的api将返回一个带有状态代码和错误消息的响应

product-service.ts：

getAllProducts(): Observable<IProduct[] | ApiResponse> {
        return this._http.get<IProduct[]>(this._GetAllUrl)
            .do(data => console.log("All: " + JSON.stringify(data)))
            .catch(err => this.HandleError(err));
    }

product.ts：

export interface IProduct{
    Id: number;
    Name: string;
    Category: string;
    Price: number;
}

app.component.ts:

public GetAllProducts(): Subscription {
    return this._ProductService.getAllProducts().subscribe(
      response => {
        // if response is type of Product

        // else if response is type of ApiResponse
      }
    );
  }

如果API可能返回产品数组或ApiResponse，如何确定从API返回的响应的接口/类？

添加帮助函数：

type Response = IProduct[] | ApiResponse;

const isProductsResponse = (response: Response): response is IProduct[] => {
  return Array.isArray(response);
}

const isApiResponse = (response: Response): response is ApiResponse => {
  return !Array.isArray(response);
}

在您的组件中：

  ngOnInit() {
    const response$: Observable<Response> = this._ProductService.getAllProducts()

    const apiResponse$ = response$.pipe(filter(isApiResponse));
    const products$ = response$.pipe(filter(isProductsResponse));

    products$.subscribe(// ... handle products)
    apiRespons$.subscribe(// ... handle apiReponse)
  }

ngOnInit（）{
const response$：Observable=this.\u ProductService.getAllProducts（）
const apiResponse$=response$.pipe（过滤器（isApiResponse））；
const products$=响应$.pipe（过滤器（isproducts响应））；
产品$。订阅（//…处理产品）
APIResponse$.subscribe（//…处理APIResponse）
}

添加助手函数：

type Response = IProduct[] | ApiResponse;

const isProductsResponse = (response: Response): response is IProduct[] => {
  return Array.isArray(response);
}

const isApiResponse = (response: Response): response is ApiResponse => {
  return !Array.isArray(response);
}

在您的组件中：

  ngOnInit() {
    const response$: Observable<Response> = this._ProductService.getAllProducts()

    const apiResponse$ = response$.pipe(filter(isApiResponse));
    const products$ = response$.pipe(filter(isProductsResponse));

    products$.subscribe(// ... handle products)
    apiRespons$.subscribe(// ... handle apiReponse)
  }

ngOnInit（）{
const response$：Observable=this.\u ProductService.getAllProducts（）
const apiResponse$=response$.pipe（过滤器（isApiResponse））；
const products$=响应$.pipe（过滤器（isproducts响应））；
产品$。订阅（//…处理产品）
APIResponse$.subscribe（//…处理APIResponse）
}

有三种功能可用于向observable的订户发送数据

complete（）

error（err:any）：void
观察者回调，用于接收来自被观察者的错误类型通知，以及附加的错误

next（值：T）：void
观察者回调，接收来自被观察者的next类型的通知，带有值。

在可观察执行期间，可以无限次地调用
observer.next（）
，但是，当调用
observer.error（）
或
observer.complete（）
时，执行将停止，不再向订阅方发送数据。

修改您的方法

如果出现错误或响应，将执行相应的代码块

 public data=[];
    public GetAllProducts(): Subscription {
        return this._ProductService.getAllProducts().subscribe(
          response => {
               this.data=response;//do whatever you want to
                },
        error=>{
                  console.log(error);//or do whatever you want to
              }
        );
      }

有三种功能可用于将数据发送给可观察的订阅服务器

complete（）

error（err:any）：void
观察者回调，用于接收来自被观察者的错误类型通知，以及附加的错误

next（值：T）：void
观察者回调，接收来自被观察者的next类型的通知，带有值。

在可观察执行期间，可以无限次地调用
observer.next（）
，但是，当调用
observer.error（）
或
observer.complete（）
时，执行将停止，不再向订阅方发送数据。

修改您的方法

如果出现错误或响应，将执行相应的代码块

 public data=[];
    public GetAllProducts(): Subscription {
        return this._ProductService.getAllProducts().subscribe(
          response => {
               this.data=response;//do whatever you want to
                },
        error=>{
                  console.log(error);//or do whatever you want to
              }
        );
      }

是什么导致了错误？API是否需要返回HTTP错误代码？到目前为止，它返回一个200，并在ApiResponse json对象上附加了一条错误消息。
状态代码2xx：表示操作已成功接收、理解和接受。
为什么api返回200表示错误？这只是return语句的默认行为。我用状态代码设置
http头
，运气好坏参半。所以我求助于使用默认的
200
并添加
ApiResponse
类？API是否需要返回HTTP错误代码？到目前为止，它返回一个200，并在ApiResponse json对象上附加了一条错误消息。
状态代码2xx：表示操作已成功接收、理解和接受。
为什么api返回200表示错误？这只是return语句的默认行为。我用状态代码设置
http头
，运气好坏参半。所以我使用了默认的
200
并添加了
ApiResponse
类。您能解释一下组件中的
$
吗？这是你自己的语法还是有棱角的味道？我以前没见过这种语法，它不是语法。只是一个惯例。任何时候，只要有一个可观察的流，就在变量名后面加上$。通过查看变量名，它可以帮助您识别哪些变量是流。您能解释一下组件中的
$
吗？这是你自己的语法还是有棱角的味道？我以前没见过这种语法，它不是语法。只是一个惯例。任何时候，只要有一个可观察的流，就在变量名后面加上$。通过查看变量名，它可以帮助您识别哪些变量是流。