如何在 Angular 2 轮询服务中访问 .subscribe 之外的值

Posted 2023-02-24

【中文标题】如何在 Angular 2 轮询服务中访问 .subscribe 之外的值

【英文标题】：How to access value outside the .subscribe in angular 2 polling service

【发布时间】：2018-06-22 08:55:24

【问题描述】：

// 我试图从订阅外部获取值，但它不能分配给任何变量。在我的项目中，使用 http.post() 方法获取 json 内容并将其分配给一个变量。我想在构造函数之外访问这些变量值。我怎样才能使它成为可能？

ngOnInit(): void 
    this.getSubscription();


// here is my subscription function

getSubscription() 
    interval(5000)
        .pipe(
         startWith(0),
         switchMap(() => this._subscriptionService.getSubData()))
         .subscribe(data => 
             this.Result = data; // able to print the data
             JSON.stringify(this.Result);

             console.log(this.Result); // able to print the data
         );

    console.log(this.Result); // undefined is printing                

//我想在订阅之外访问this.result并赋值给一个公共变量

【参考方案1】：

您在ngOnInit 中调用getSubscription()，此时您的变量Result 未设置，因为您的http 请求是异步的。在您的订阅方法第一次执行后，变量被设置。

如果其他函数需要该值，我建议您在订阅中调用它们，否则您无法确定您的 http 请求何时完成。

getSubscription() 
    interval(5000)
        .pipe(
         startWith(0),
         switchMap(() => this._subscriptionService.getSubData()))
         .subscribe(data => 
             this.Result = data; // able to print the data
             JSON.stringify(this.Result);

             console.log(this.Result); // able to print the data

             // Is called every time you get a new result and this.Result is set now
             this.processResults();
     );

    // Not set yet
    console.log(this.Result); // undefined is printing                


processResults() 
    // Do some stuff with your results, this.Result is set now

【讨论】：

我已经在函数之外定义了 Result 变量，它不会像那样工作。你能举个例子吗？？

【参考方案2】：

在函数外定义结果，如下所示

Result:any;

ngOnInit(): void 
       this.getSubscription();
    

// here is my subscription function

     getSubscription() 
        interval(5000)
        .pipe(
         startWith(0),
         switchMap(() => this._subscriptionService.getSubData()))
         .subscribe(data => 
          this.Result = data; // able to print the data
          JSON.stringify(this.Result);

          console.log(this.Result); // able to print the data
                     );

           console.log(this.Result); // undefined is printing                
          

【讨论】：

我已经在函数之外定义了 Result 变量，它不会像那样工作。你能举个例子吗？？

【参考方案3】：

这是因为 console.log(this.Result) 在 .subscribe() 方法完成执行之前执行。这可以通过使用 async await 来处理。

async ngOnInit(): void 
 await this.getSubscription();

【讨论】：

订阅是不可等待的，只是承诺。