angular - 在 Angular 2 应用程序中的后台/单独线程中执行函数

Question

我正在开发一个应用程序，我有以下要求。从我的 Angular 应用程序中，我正在对服务器进行 REST 调用，这将触发服务器上的某些作业并返回状态为“作业已开始”。之后我想每10秒检查一次作业的状态，为此服务器提供了返回作业状态的API。

现在我的要求是我需要每 10 秒调用一次此作业状态 API，但在后台，这意味着用户应该能够在应用程序上执行其他任务。

我如何实现这一目标？

任何有关示例的帮助都会非常有帮助。

Answer 1

您可以将 RxJS observable 与计时器一起使用，以便您轻松控制计时器。如果页面卸载时不​​销毁计时器，则页面销毁后也会调用 API。在组件文件中，API 将每 10 秒调用一次，直到变量 alive 为 true，我们在 destroy 时将其设置为 false 以停止计时器。

Working demo

组件文件

import { Component } from '@angular/core';
import { AppTestService } from './app-test.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/takeWhile';
import 'rxjs/add/observable/timer'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers:[ AppTestService ]
})
export class AppComponent  {
  name = 'Angular 5';
  alive = true;

  constructor(private appTest : AppTestService) {
    Observable.timer(0,10000)
    .takeWhile(() => this.alive) // only fires when component is alive
    .subscribe(() => {
      this.appTest.getData().subscribe(data=> {
        console.log(data);
      })
    });
  }

  ngOnDestroy(){
    this.alive = false; // switches your IntervalObservable off
  }
}

服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class AppTestService {

  constructor(private http:HttpClient) { }

  getData(){
    return this.http.get('https://jsonplaceholder.typicode.com/users/1');
  }

}