【问题标题】:How RxJS Subscriptions work when making an HTTP request?发出 HTTP 请求时,RxJS 订阅如何工作?
【发布时间】:2020-11-06 10:55:47
【问题描述】:
  export class VendorHttpService {
  result = '0';
  constructor(private http: HttpClient, private global: GlobalService) { }

  getProfileStatus(uid: String): string {
    this.http.get(this.global.getUrl()+"/vendor/profile-status/"+uid).subscribe(
      (val: number) => {
        this.result = String(val);
        console.log("got executed "+this.result)
      }, error => {
        //console.log("error")
        this.result = error;
      }
    );
    return this.result;
  }
}

因此,从 Angular 8 中的上述代码中,您可以看到我正在使用 RxJS 向服务器发出 HTTP 请求,但在方法内部,我想从请求中返回值而不是组件的整个 RxJS 订阅。如您所见,我已经声明了一个名为 result 的变量,我在方法内部对其进行了更新,然后将其返回,但是当我在组件中调用此方法 getProfileStatus() 时,我得到初始值0。

我不明白为什么它不更新?我想知道 RxJS 在 Subscribe() 方法中的行为。

getProfileStatus() 方法是否在 Subscribe() 完成其任务之前返回?

请放心,我已经检查了服务器和数据库端的所有内容。

【问题讨论】:

  • 除了下面@asher-Kleiman 的回答之外,如果您希望异步 http 请求表现得像同步操作,您可以使用路由解析器。这可以自动订阅并返回 data 而不是 Observable 流。

标签: angular typescript http rxjs


【解决方案1】:

是的,getProfileStatus() 在 Subscribe() 完成其任务之前返回。 当您订阅时,您正在触发请求并让浏览器知道当答案到达时,它必须使用您提供的功能来处理它。然后它只是继续下一行,但订阅中的函数正在等待执行。 我建议这样做的方法是返回可订阅而不是值并从您的组件订阅。所以这将为您服务:

  getProfileStatus(uid: String): Observable<string> {
    return this.http.get(this.global.getUrl()+"/vendor/profile-status/"+uid)
  }

在你的组件中应该有这样的东西:

constructor(private vendorHttp: VendorHttpService){}

functionName() {
  this.vendorHttp.getProfileStatus("some_uid").subscribe(
      (val: number) => {
        this.result = String(val);
        console.log("got executed "+this.result)
      }, error => {
        //console.log("error")
        this.result = error;
      }
  );
}

【讨论】:

  • 我不知道为什么这被否决了?这是处理 http 和 RxJS Observables 的基本方法。传递给订阅的函数基本上是一个回调函数,一旦检索到数据就会“回调”。但是到那时,你的函数已经返回了你的默认值。
猜你喜欢
  • 2017-03-21
  • 1970-01-01
  • 2020-09-11
  • 2018-12-11
  • 2019-08-21
  • 2019-07-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多