service加一個(gè)強(qiáng)類型轉(zhuǎn)換，業(yè)務(wù)層就直接使用data就行了，類似于這樣：

  class NewsList {
      data:{
          id: string;
          title: string;
          cate_price:string;
      }
    }
  getDetail(id){
    return this.http.get<NewsDetail>(`http://xxx.com/api/news/news_detail?id=${id}`)
  }

可以在service里面寫個(gè)promise來把傳來的數(shù)據(jù)resolve給組件。

然后，比如try catch捕獲異常給反饋，數(shù)據(jù)是空的給反饋，獲取到了數(shù)據(jù)才做后續(xù)動(dòng)作。

# login.service.ts

getloginData = () => {
  return new Promise((resolve, reject) => {
    this.login(user).subscribe(
      (next) => {
        resolve(next);
      },
      (error) => {
        reject(error);
      }
    );

  });

};

你的component.ts

data: any[] = [];

submit = async () => {
  ...

  try() {
    data = await this.loginService.getloginData();
    if(data.length <= 0) {
      console.error("啊 data不見啦！");
      ...
    }
    ...
  } catch (err) {

    ...(處理異常)
  }

  
  
};

往組件里面注入服務(wù)

很多數(shù)據(jù)以及業(yè)務(wù)邏輯的處理可以在LoginService中做完， 返回一個(gè)observable，返回值是你希望返回到component中最終的數(shù)據(jù)。

login（user: User): Observable<any> {
   return this.callApi(user).map(() => {
        ......
        localStorage.......
        return your data;
   });
}

這樣你在component中訂閱到這個(gè)observable時(shí)， 返回的就是你想要的結(jié)果，而不需要做額外的業(yè)務(wù)處理。

this.loginService.getUser(user).subscribe((data: any) => {}, (err: Error) => {});

而且還有一點(diǎn)就是， 你在getUser的訂閱中，又調(diào)用了另外一個(gè)Observable setUserInfo, 盡量不要使用subscribption的嵌套

你完全可以將這兩個(gè)流寫到一起， 使用flatMap

login（user: User): Observable<any> {
 return this.callApi(user).flatMap(() => {
    ......
    localStorage.......
    return this.setUsernfo(user);
}).map(() = > {
   set user info
 };
}