Reactjs 这个角度为10的代码将如何反应？

我必须实现angular中的代码，但在reactjs中，问题是在reactjs中我没有一些angular库，所以我不得不修改代码。 在角度方面，我导入到rxjs并执行http查询：

export class AuthenticationService {
  private userSubject: BehaviorSubject<User>;
  public user: Observable<User>;
  constructor(
    private router: Router,
    private http: HttpClient
  ) {
  refreshToken() {
    return this.http.post<any>(`${apiUrl}/users/refresh-token`, {}, { withCredentials: true })
      .pipe(map((user) => {
      this.userSubject.next(user);
      this.startRefreshTokenTimer();
      return user;
    ));
  }
  private startRefreshTokenTimer() {
    const jwtToken = JSON.parse(atob(this.userValue.jwtToken.split('.')[1]));
    const expires = new Date(jwtToken.exp * 1000);
    const timeout = expires.getTime() - Date.now() - (60 * 1000);
    this.refreshTokenTimeout = setTimeout(() => this.refreshToken().subscribe(), timeout);
  }
}

我遵循这个指南：我基本上是在React中调整这个结构，我使用这个指南是因为它使用了与我相同的后端。

它实际上是一样的

import axios from 'axios';

export class AuthenticationService {
  private userSubject: BehaviorSubject<User>;
  public user: Observable<User>;

  refreshToken() {
    return from(axios.post<any>(`${apiUrl}/users/refresh-token`, {}, { withCredentials: true }))
      .pipe(map((user) => {
        this.userSubject.next(user);
        this.startRefreshTokenTimer();
        return user;
      }));
  }

  private startRefreshTokenTimer() {
    const jwtToken = JSON.parse(atob(this.userValue.jwtToken.split('.')[1]));
    const expires = new Date(jwtToken.exp * 1000);
    const timeout = expires.getTime() - Date.now() - (60 * 1000);
    this.refreshTokenTimeout = setTimeout(() => this.refreshToken().subscribe(), timeout);
  }
}

从“axios”导入axios；
导出类身份验证服务{
私有用户主体：行为主体；
公共用户：可观察；
刷新令牌（）{
从（axios.post（`${apirl}/users/refresh-token`，{}，{withCredentials:true}）返回）
.pipe（地图（（用户）=>{
this.userSubject.next（用户）；
this.startRefreshTokenTimer（）；
返回用户；
}));
}
专用startRefreshTokenTimer（）{
const jwtToken=JSON.parse（atob（this.userValue.jwtToken.split（'.'）[1]）；
const expires=新日期（jwtToken.exp*1000）；
const timeout=expires.getTime（）-Date.now（）-（60*1000）；
this.refreshTokenTimeout=setTimeout（（）=>this.refreshToken（）.subscribe（），timeout）；
}
}

---

Upd：请记住，在React世界中没有服务这个术语。在小型应用程序中，你可以使用状态，在大型应用程序中，最好使用Redux/MobX/任何其他应用程序状态管理库（如果你使用过ngxs/ngrx/akita，你知道这个概念）

我希望你在可观察的部分遇到问题。在angular httpClient中，客户端是一个可观察的对象，因此需要

subscrible

来执行可观察的对象，但在react中，您不需要它，只需将其作为对象方法直接调用即可。这就是我的想法，所以我想我可以使用.then（response=>{…}）；但是如何混合（response）和.map（（user）=>{}）；？我不再需要rxjs库了@VaibhavSo以前，一切都是可观察的，因此您的代码必须相应地执行操作，但如果不使用可观察的，则您不需要

map

和其他，

refreshtToken

获取用户并返回用户，因此您不需要

map

仅在

中（响应=>{}）

调用函数更新用户，或者说user subject并调用startRefreshTokenTimer`刷新令牌。您已经为我澄清了一些事情，谢谢。但是当让

refreshttoken

返回一个简单的用户类而不使用

map

和

subscribe

时，我还有其他疑问。我不明白为什么

refreshttoken（）

和

startRefreshTokenTimer（）

之间没有生成无限循环，我认为

subscribe

与此有关。或者循环是故意的，这很令人困惑。(╯°□°）╯︵ ┻━┻ @VaibhavOkay，所以用例是这样的，当refresh被调用时，它还绑定了

startRefreshTokenTimer

，它将再次调用refresh来刷新令牌，现在

subscribe

in timeout将触发刷新并使这个过程递归。要实现相同的保存，您只需调用一次刷新即可在该响应中，调用计时器并设置超时，然后根据超时调用刷新。在

this.userSubject.next（user）；

中显示了一条警告

类型“AxiosResponse”与类型“user”没有共同的属性；

。它不是像

userSubject.next（user.data）吗

或类似的东西？另一个问题是我可以将此结构与useContext（reducers）一起使用吗？@Ilya Boyko

import axios from 'axios';

export class AuthenticationService {
  private userSubject: BehaviorSubject<User>;
  public user: Observable<User>;

  refreshToken() {
    return from(axios.post<any>(`${apiUrl}/users/refresh-token`, {}, { withCredentials: true }))
      .pipe(map((user) => {
        this.userSubject.next(user);
        this.startRefreshTokenTimer();
        return user;
      }));
  }

  private startRefreshTokenTimer() {
    const jwtToken = JSON.parse(atob(this.userValue.jwtToken.split('.')[1]));
    const expires = new Date(jwtToken.exp * 1000);
    const timeout = expires.getTime() - Date.now() - (60 * 1000);
    this.refreshTokenTimeout = setTimeout(() => this.refreshToken().subscribe(), timeout);
  }
}