时间戳

首页 > 解决方案 > 在angular rxjs中注入另一个服务后的订阅问题

angular - 在angular rxjs中注入另一个服务后的订阅问题

问题描述

我有一个服务类NetworkService，我在其中放置了所有常规的rest api 请求，例如 get、put、post、delete等，所有其他服务都使用此 NetworkService 方法来执行操作。目前，我正在订阅所有其他服务中的NetworkService方法。我想知道是否有更好的方法可以做到这一点，以便我可以在组件中而不是在其他服务中进行订阅。例如，对于登录，我使用的是AuthenticationService方法，它订阅了NetworkService的方法 ：

身份验证服务方法：

doLogin(loginData) {
 let loginParams = {
   client_id: "app",
   grant_type: "password",
   password: btoa(loginData.password),
   username: loginData.username,
 };

 this.networkService.postGetToken(loginParams).subscribe(
  (data) => {
    this.onPostGetTokenSuccess(data);
  },
  (error) => {
    this.onPostGetTokenError(error);
  }
 );

}

网络服务方法：

postGetToken(dataParam) {
   //Used only for Login
   let options = {
     headers: {
       "Content-Type": "application/x-www-form-urlencoded",
     },
   };

   let data = { params: dataParam };

   return this.http
     .post(
       this.baseurl +"svf/zsv/oauth/oauth20/token",
    data,
    options
  )
  .pipe(
    map(
      (data) => {},
      (error) => {}
    )
  );
 }

在登录组件中，我无法订阅 AuthenticationService 的doLogin方法， 因为在 AuthenticationService 我已经订阅了NetworkService的方法， 并且很难在登录组件中获得结果。在登录组件中，我这样做如下：

performlogin() {
   if (!this.loginForm.valid) {
    return false;
   } else {
   this.loaderService.showLoader();

  let data = this.authenticationService.doLogin(this.loginForm.value);
   if (data["access_token"]) {
   
   } else {
   }
  }
}

如果有人知道更好的方法，请在此处分享。谢谢

标签： angularrxjs

解决方案

您不必订阅 AuthenticationService。只需返回对您的 NetworkService 的调用，如果您对数据进行任何操作，例如。映射，只需在 AuthenticationService 中使用管道和使用其他 rxjs 运算符。订阅总是在你的管道末端使用（当你想最终使用你的数据时），这通常在你的组件中。因此，您的 AuthenticationService 将是：

doLogin(loginData) : Observable<Type of data returned>{
 let loginParams = {
   client_id: "app",
   grant_type: "password",
   password: btoa(loginData.password),
   username: loginData.username,
 };

 this.networkService.postGetToken(loginParams);
}

推荐阅读