Angular 角度5的嵌套可观测

下面的代码是我嵌套的可观察代码。但我想以更聪明的方式更改代码。所以我想把这段代码改为不使用嵌套方式

如何将此代码更改为非嵌套方式

user: User;
places: Place[];
user_id: string;

this.loginService.getLoginData(email, password).subscribe(
  res1 => {
    this.user = res1;
    this.storageService.saveUserInfo(this.user.userinfo);

    this.loginService
      .getPlaces(this.user.userinfo.token)
      .subscribe(
        res2 => {
          this.places = res2;
          const placeList = this.places.result.place_list.map(place => {
            return place.place_cd;
          });
          const userInfo = new UserInfoImpl(
            this.user.userinfo.email,
            this.user.userinfo.name,
            placeList
          );
          const account = new AccountImpl(
            this.user.userinfo.token,
            userInfo
          );
          this.loginService.postAccount(account).subscribe(
            res3 => {
              this.user_id = res3;
              if (this.user_id) {
                this.storageService.saveUserId(this.user_id);
              }
            },
            err => {
              console.log('err!!! ', err.message);
            }
          );
        },
        err => {
          console.log('err!!! ', err.message);
        }
      );
  },
  err => {
    console.log('err!!! ', err.message);
  }
);

---

您可能需要使用

.concatMap

操作符。虽然

.mergeMap

.switchMap

也可以工作

简化代码：

this.loginService.getLoginData()
    .do((data) => this.storeTheData)
    .concatMap((logindata) => this.loginService.getPlaces())
    .concatMap((placesdata) => this.loginService.postAccount())
    .subscribe()

因为你确实有很多副作用，而且你的代码也不是完全被动的，所以有一种不同的方法来解决这个问题。您可以侦听存储的登录数据更改以加载其他数据。我将给出一个简单的版本，可能没有什么意义

class Store {
    loginData = new ReplaySubject<LoginData>(1);
    placesData = new ReplaySubject<PlacesData>(1);
}

class AuthService {
    constructor(private store: Store, private http: Http) {

    }

    login() {
            this.http.post("login").subscribe(data => this.store.loginData.next(data));
    }
}

class PlacesService {
    constructor(store: Store, http: Http) {
        store.loginData
             .switchMap((loginData) => http.get("places" + loginData.placesId))
             .subscribe(places => store.places.next(places)
    }
}

类存储{
loginData=新的重播主题（1）；
placesData=新的ReplaySubject（1）；
}
类身份验证服务{
构造函数（私有存储：存储，私有http:http）{
}
登录（）{
this.http.post（“login”）.subscribe（数据=>this.store.loginda.next（数据））；
}
}
类位置服务{
构造函数（存储：存储，http:http）{
罗吉娜达商店
.switchMap（（loginda）=>http.get（“places”+loginda.placesId））
.subscribe（places=>store.places.next（places）
}
}

您可能想使用

.concatMap

操作符。尽管

.mergeMap

，但switchMap

也可以工作

简化代码：

this.loginService.getLoginData()
    .do((data) => this.storeTheData)
    .concatMap((logindata) => this.loginService.getPlaces())
    .concatMap((placesdata) => this.loginService.postAccount())
    .subscribe()

因为你确实有很多副作用，而且你的代码不是完全被动的，所以还有一种不同的方法。你可以监听存储的登录数据更改来为你加载其他数据。我将给出一个简单的版本，它可能没有多大意义

class Store {
    loginData = new ReplaySubject<LoginData>(1);
    placesData = new ReplaySubject<PlacesData>(1);
}

class AuthService {
    constructor(private store: Store, private http: Http) {

    }

    login() {
            this.http.post("login").subscribe(data => this.store.loginData.next(data));
    }
}

class PlacesService {
    constructor(store: Store, http: Http) {
        store.loginData
             .switchMap((loginData) => http.get("places" + loginData.placesId))
             .subscribe(places => store.places.next(places)
    }
}

类存储{
loginData=新的重播主题（1）；
placesData=新的ReplaySubject（1）；
}
类身份验证服务{
构造函数（私有存储：存储，私有http:http）{
}
登录（）{
this.http.post（“login”）.subscribe（数据=>this.store.loginda.next（数据））；
}
}
类位置服务{
构造函数（存储：存储，http:http）{
罗吉娜达商店
.switchMap（（loginda）=>http.get（“places”+loginda.placesId））
.subscribe（places=>store.places.next（places）
}
}

别忘了取消订阅。在安格拉等水疗中心尤其重要谢谢你，先生！我以为我可以使用这3张地图，但我不知道如何使用这些地图。我还认为可以观察到。folkJoin（）但这不是系列案例，而是平行案例，对吗？你的建议很有帮助。再次谢谢你，先生！对不起，我的英语很差！不要忘了退订。特别是在像Angular这样的水疗中心。谢谢你，先生！我想我可以使用这3张地图，但我不知道如何使用这些地图。我还认为可以观察到。folkJoi但这不是串联的，而是并联的，对吗？你的建议很有帮助。再次谢谢你，先生！对不起，我的英语很差！