Javascript 消除口是心非

我刚开始学习rxjs的Angular课程，我们的团队受到了挑战

他们给我们发了一段代码，说虽然它工作得很好，但代码并不干净，“getUserLogin”函数与“login”方法相比有一些重复性。因此，挑战在于识别它并消除这种两面性

代码如下：

login(): Observable<UserModel> {
    if (!sessionStorage["userCredentials"]){
        return this.http.get<UserModel>(`${environment.apiLogin}/user/login?sistema=${enviroment.system}`,
        { withCredentials: true })
        .pipe(
            tap((res: UserModel) => {
                sessionStorage["userCredentials"] = JSON.stringify(res);
        })
        );
    } else {
        return Observable.of(<UserModel>JSON.parse(sessionStorage["userCredentials"]));
    }
}

getUserLogin(): Observable<string> {   
    if (sessionStorage["userCredentials"]){
        const userData = <UserModel>JSON.parse(sessionStorage["userCredentials"])
        return Observable.of(userData.login);
    }

    return Observable.of("");
}

login（）：可观察{
如果（！sessionStorage[“userCredentials”]）{
返回此.http.get（`${environment.apiLogin}/user/login？sistema=${environment.system}`，
{withCredentials:true}）
.烟斗(
点击（（res:UserModel）=>{
sessionStorage[“userCredentials”]=JSON.stringify（res）；
})
);
}否则{
返回Observable.of（JSON.parse（sessionStorage[“userCredentials]”））；
}
}
getUserLogin（）：可观察的{
if（会话存储[“用户凭据”]）{
const userData=JSON.parse（会话存储[“userCredentials”]）
返回可观察的.of（userData.login）；
}
可观察的回报率（“”）；
}

如果您能帮助解决这一挑战，我们将不胜感激。提前谢谢

类似这样：

login(): Observable<UserModel> {
    const cred = this.getUserCredentialsFromStorage();
    if (!cred){
        return this.http.get<UserModel>(`${environment.apiLogin}/user/login?sistema=${enviroment.system}`,
        { withCredentials: true })
        .pipe(
            tap((res: UserModel) => {
                sessionStorage["userCredentials"] = JSON.stringify(res);
        }));
    }
    return Observable.of(cred);
}

getUserCredentialsFromStorage(): UserModel {
  if (sessionStorage["userCredentials"]) {
      const userData = <UserModel>JSON.parse(sessionStorage["userCredentials"]);
      return userData;
  }
  return null;
}

getUserLogin(): Observable<string> {   
  const cred = getUserCredentialsFromStorage();
  return  Observable.of(cred ? cred.login : '');
}

login（）：可观察{
const cred=this.getUserCredentialsFromStorage（）；
如果（！cred）{
返回此.http.get（`${environment.apiLogin}/user/login？sistema=${environment.system}`，
{withCredentials:true}）
.烟斗(
点击（（res:UserModel）=>{
sessionStorage[“userCredentials”]=JSON.stringify（res）；
}));
}
可观察的回报率（cred）；
}
getUserCredentialsFromStorage（）：UserModel{
if（会话存储[“用户凭据”]）{
const userData=JSON.parse（sessionStorage[“userCredentials]”）；
返回用户数据；
}
返回null；
}
getUserLogin（）：可观察的{
const cred=getUserCredentialsFromStorage（）；
返回可观察到的（cred？cred.login:“”）；
}

请注意，在重构时，需要仔细注意类型

getUserLogin

和

login

都解析sessionStorage对象以获取一个

UserModel

，然后对它执行不同的操作。一个返回

可观察的

，另一个提取登录字符串并返回

可观察的

。因此，我们可以重构出一个解析

用户模型的函数，并让这两个函数都调用它。
类似这样：

login(): Observable<UserModel> {
    const cred = this.getUserCredentialsFromStorage();
    if (!cred){
        return this.http.get<UserModel>(`${environment.apiLogin}/user/login?sistema=${enviroment.system}`,
        { withCredentials: true })
        .pipe(
            tap((res: UserModel) => {
                sessionStorage["userCredentials"] = JSON.stringify(res);
        }));
    }
    return Observable.of(cred);
}

getUserCredentialsFromStorage(): UserModel {
  if (sessionStorage["userCredentials"]) {
      const userData = <UserModel>JSON.parse(sessionStorage["userCredentials"]);
      return userData;
  }
  return null;
}

getUserLogin(): Observable<string> {   
  const cred = getUserCredentialsFromStorage();
  return  Observable.of(cred ? cred.login : '');
}

login（）：可观察{
const cred=this.getUserCredentialsFromStorage（）；
如果（！cred）{
返回此.http.get（`${environment.apiLogin}/user/login？sistema=${environment.system}`，
{withCredentials:true}）
.烟斗(
点击（（res:UserModel）=>{
sessionStorage[“userCredentials”]=JSON.stringify（res）；
}));
}
可观察的回报率（cred）；
}
getUserCredentialsFromStorage（）：UserModel{
if（会话存储[“用户凭据”]）{
const userData=JSON.parse（sessionStorage[“userCredentials]”）；
返回用户数据；
}
返回null；
}
getUserLogin（）：可观察的{
const cred=getUserCredentialsFromStorage（）；
返回可观察到的（cred？cred.login:“”）；
}

请注意，在重构时，需要仔细注意类型

getUserLogin
和
login
都解析sessionStorage对象以获取一个
UserModel
，然后对它执行不同的操作。一个返回
可观察的
，另一个提取登录字符串并返回
可观察的
。因此，我们可以重构出一个解析
用户模型的函数，并让这两个函数都调用它。
从这个问题中，我唯一能推断的是，这两个函数中都存在对sessionStorage值的重复检查

IMO下面应该是修订后的代码

login(): Observable<UserModel> {
        this.getUserLogin().mergeMap(res => {
            if (res === '') {
                return this.http.get<UserModel>(`${environment.apiLogin}/user/login?sistema=${enviroment.system}`,
                    { withCredentials: true })
                    .pipe(
                        tap((res: UserModel) => {
                            sessionStorage["userCredentials"] = JSON.stringify(res);
                            this.userData(sessionStorage["userCredentials"])
                        })
                    );
            } else {
                this.userData(sessionStorage["userCredentials"])
            }
        })

    }



    getUserLogin(): Observable<string> {
        if (sessionStorage["userCredentials"]) {
            this.userData(sessionStorage["userCredentials"])
        }

        return Observable.of("");
    }

    userData(data) {
        const userData = <UserModel>JSON.parse(data)
        return Observable.of(userData.login);
    }

login（）：可观察{
this.getUserLogin（）.mergeMap（res=>{
如果（res==''）{
返回此.http.get（`${environment.apiLogin}/user/login？sistema=${environment.system}`，
{withCredentials:true}）
.烟斗(
点击（（res:UserModel）=>{
sessionStorage[“userCredentials”]=JSON.stringify（res）；
this.userData（会话存储[“userCredentials”]）
})
);
}否则{
this.userData（会话存储[“userCredentials”]）
}
})
}
getUserLogin（）：可观察{
if（会话存储[“用户凭据”]）{
this.userData（会话存储[“userCredentials”]）
}
可观察的回报率（“”）；
}
用户数据（数据）{
const userData=JSON.parse（数据）
返回可观察的.of（userData.login）；
}
从这个问题中，我唯一能推断出的是，这两个函数中都存在对sessionStorage值的重复检查

IMO下面应该是修订后的代码

login(): Observable<UserModel> {
        this.getUserLogin().mergeMap(res => {
            if (res === '') {
                return this.http.get<UserModel>(`${environment.apiLogin}/user/login?sistema=${enviroment.system}`,
                    { withCredentials: true })
                    .pipe(
                        tap((res: UserModel) => {
                            sessionStorage["userCredentials"] = JSON.stringify(res);
                            this.userData(sessionStorage["userCredentials"])
                        })
                    );
            } else {
                this.userData(sessionStorage["userCredentials"])
            }
        })

    }



    getUserLogin(): Observable<string> {
        if (sessionStorage["userCredentials"]) {
            this.userData(sessionStorage["userCredentials"])
        }

        return Observable.of("");
    }

    userData(data) {
        const userData = <UserModel>JSON.parse(data)
        return Observable.of(userData.login);
    }

login（）：可观察{
this.getUserLogin（）.mergeMap（res=>{
如果（res==''）{
返回此.http.get（`${environment.apiLogin}/user/login？sistema=${environment.system}`，
{withCredentials:true}）
.烟斗(
点击（（res:UserModel）=>{
sessionStorage[“userCredentials”]=JSON.stringify（res）；
this.userData（会话存储[“userCredentials”]）
})
);
}否则{
this.userData（会话存储[“userCredentials”]）
}
})
}
getUserLogin（）：可观察{
if（会话存储[“用户凭据”]）{
this.userData（会话存储[“userCredentials”]）
}
可观察的回报率（“”）；
}
用户数据（数据）{
const userData=JSON.parse（数据）
返回可观察的.of（userData.login）；
}
为什么
getUserLogin（）