Rxjs在Angular中如何更好的与component拆分或者解耦

Question

发现在component里写着写着就越来越长了,如何把这些逻辑处理写到service中,在service处理后返回成功或失败给组件,组件只负责显示这些处理后的东西

Answer 1

很多数据以及业务逻辑的处理可以在LoginService中做完， 返回一个observable，返回值是你希望返回到component中最终的数据。

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

这样你在component中订阅到这个observable时， 返回的就是你想要的结果，而不需要做额外的业务处理。

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

而且还有一点就是， 你在getUser的订阅中，又调用了另外一个Observable setUserInfo, 尽量不要使用subscribption的嵌套

你完全可以将这两个流写到一起， 使用flatMap

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

Answer 2

往组件里面注入服务

Answer 3

可以在service里面写个promise来把传来的数据resolve给组件。

然后，比如try catch捕获异常给反馈，数据是空的给反馈，获取到了数据才做后续动作。

# 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) {

    ...(处理异常)
  }

  
  
};

Answer 4

service加一个强类型转换，业务层就直接使用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}`)
  }