消除重复答案

【问题标题】：Remove duplicity消除重复
【发布时间】：2021-04-26 05:04:09
【问题描述】：

我是 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("");
}

我们将非常感谢您在解决这一挑战方面的任何帮助。提前致谢！

【问题讨论】：

如果getUserLogin() 的返回语句都使用Observable.of()，为什么它需要返回一个 Observable？返回纯字符串不是更简单吗？
我也很难理解！你知道一些阅读材料以了解更好的可观察方法吗？

标签： javascript angular typescript rxjs

【解决方案1】：

类似这样的：

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 : '');
}

请注意，在重构时，您需要特别注意类型。

getUserLogin 和 login 都解析 sessionStorage 对象得到一个UserModel，然后用它做不同的事情。一个返回Observable<UserModel>，另一个提取登录字符串并返回Observable<string>。所以我们可以重构出一个解析UserModel的函数，并让两个函数都调用它。

【讨论】：

谢谢，伙计，您的回答似乎很好！如果你不介意，有几个问题。在“getUserCredentialsFromStorage”中，为什么要创建一个常量 userData 只是为了立即返回它？只返回 JSON.parse 不是更经济吗？ Observale 和 Observable 有什么区别？我在处理 observables 时遇到了一些麻烦。你知道有什么材料可以很好地阅读和理解那部分吗？
是的，当然您可以立即返回解析结果。 Observable 和 Observable 之间的区别在于，在前一种情况下，observable 的消费者正在接收 UserModel 对象的实例，在其他简单字符串中（在这种情况下是 UserModel 的登录字段）。我对 Angular 有一定的了解，但我不是这方面的专家，所以除了你毫无疑问可以自己谷歌搜索之外，我无法为你指明 Observables 上的资源方向。

【解决方案2】：

从这个问题中，我唯一可以推断的是，两个函数中都存在对 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);
    }

【讨论】：