在 Rxjs Angular 中將 Observable 的屬性返回為 Observable

Question

我是 angular 和 Observables 的新手。我的 Rest API 總是返回自定義響應類型

 export class CustomApiResponse {
      isSucess: boolean | undefined; //  denotes whether request was sucess
      statusCode: number | undefined; //  custom status codes from webapi 
      error: string | undefined;      // error message in case of error
      value: any;                 //data which may be array of object or single object
    }

我為所有 httprequest 提供通用服務

export class HttpHelperService {
  BaseUrl:String="mydominurl/api";
  constructor( private httpclient :HttpClient) { }

   GetData(url:string) : Observable<CustomApiResponse>{
    return  this.httpclient.get<CustomApiResponse>(this.BaseUrl+url);
   }
  }

現在我需要調用這個 httphelper 並使用我的服務從響應中提取數據作為可觀察的，如下所示（我無法弄清楚）

export class CategoryService {
  url:String="/api_category";
  constructor( private httphelper :HttpHelperService) {  }

   getCategories(url:string) : Observable<Category[]>{   

     this.httphelper.GetData(url).subscribe(val=>{
      if(val.isSucess){ 
     return val.value; //How to do this
     }} );  }

}

請建議我如何重寫上述方法，以便我可以從我的組件中調用上述服務，如下所示

export class CategoryListComponent implements OnInit {

  Items: Observable< Category[]> | undefined;
  url:string="/Api_category";
  constructor( private catservice :CategoryService) {
  }

  ngOnInit(): void {
    this.catservice.getCategories(this.url).subscribe(val=> this.Items=val);
  }
}

Answer 1

我認為您要做的是在從 HttpHelper 獲得回復后修改提供給 CategoryListComponent 的值。

這可以使用map運算符來完成，如下所示：

export class CategoryService {
  url:String="/api_category";
  constructor( private httphelper :HttpHelperService) {  }

   getCategories(url:string) : Observable<Category[]>{   
     return this.httphelper.GetData(url).pipe(map((val) => val.isSuccess ? val.value : []));
   }

}

這將返回一個新的 observable，它將響應的值從 GetData 更改為其他值（在這種情況下，如果 val.isSuccess 為真，則為 val.value，否則為空列表）。

然后你的組件將要訂閱，它會正常工作。

始終嘗試訂閱 observables 作為一長串 observables 的最后一步。 這將需要對 RxJS 進行大量學習，但這是正確的方法，理想情況下，您將讓您的組件訂閱 observable，其余的中間服務將映射、過濾、轉換或組合信息。