RxJS - 请求数据更新流实例

这个实例主要目的是

1. 请求后对数据简单处理
2. 数据缓存到某obj
3. 实现数据更新订阅

onSubmit(value: userInfo): void {
    console.log('you submitted value: ', value);
    this._tokenService.getToken(value)
        .subscribe(this._userServices.updateUserInfoStream);
    this._router.navigateByUrl('/dashboard');
}

这里 this._tokenService.getToken(value) 内部实现请求

getToken(userInfo: userInfo) {
    return this._http.post(baseURL + "/client", JSON.stringify(userInfo), this.option.Option).map(res=>res.json());
}

这里只是简单的变成json处理

中间通过Subject进行传递流,去操作缓存的obj

updateUserInfoStream: Subject<userInfo> = new Subject<userInfo>();


   // Observable string streams
   // updateUserInfoStream$ = this._updateUserInfoStream.asObservable();

   //Make sure you bootstrap your service at startup
   constructor() {
       this.userAccount = new userInfo();
       this.updateUserInfoStream.subscribe(usr => {
           this.updateUserInfo(usr);
           localStorage.setItem("token", this.userAccount.token);
           console.log(this.userAccount, "in service contr");
       })
   }


   updateUserInfo(_userInfo: userInfo) {
       this.userAccount.update(_userInfo.user, _userInfo.token, _userInfo.authenticate);
       // this._updateUserInfoStream.next(this.userAccount);
       console.log("update user info....");
   }

传递到updateUserInfoStream的时候会进行构造里的updateUserInfo操作,更新obj

其他组件里就可以订阅及时得到更新的obj

constructor(private _userServices: UserInfoServices) {
    this._userServices.updateUserInfoStream.subscribe(x => {
        console.log("nav",x);
    })
}