Question

我创建了一个用于分析的API，该API依赖于客户端每隔几分钟发送一次带有会话ID（仅保存在var中，以便每次重新加载页面时都会重置）的请求。我已经创建了一个角度服务来发送来自客户端的请求，但我无法让它保持运行并每隔几秒钟执行一次功能。

我已经在所有组件中导入了服务，并在构造函数中声明了它；并仅在应用模块中提供它，因此所有组件都可以使用同一实例

我的所有组件都由路由器出口在我的应用程序组件中生成

服务：

declare var $:any;
export class AnalyticsService {
  sessionID = '';
  uniqueID = '';
  sendStatData() {
    const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
    const sendRequest = () => $.ajax({
      url: 'https://api.com/aah',
      type: 'POST',
      dataType: 'json',
      data: JSON.stringify({
        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
        sessionID: this.sessionID,
        uniqueID: this.uniqueID,
        address: '',
      })
    });
    const resp = sendRequest()
      .done(response => {
        if (response) {
          console.log(response);
          const data = response;
          if (data.sessionID !== undefined) {
            this.sessionID = data.sessionID;
          }
          if (data.uniqueID !== undefined) {
            localStorage.setItem('uniqueID', data.uniqueID);
            this.uniqueID = data.uniqueID;
          }
          if (data.message === 'uniqueID not found in database') {
            localStorage.removeItem('uniqueID');
            this.uniqueID = '';
            sendRequest();
          }
          delay(30000);
          sendRequest();
        }
      });
  }
  start() {
    if (localStorage.getItem('uniqueID') !== null){
      this.uniqueID = localStorage.getItem('uniqueID');
    }
    this.sendStatData();
  }
}

app.module.ts：

.
.
import {AnalyticsService} from './analytics.service';
.
.
@NgModule({
  .
  .
  .
  providers: [AnalyticsService],
  .
  .
})

app.component.ts：

import {Component, OnInit} from '@angular/core';
import {AnalyticsService} from './analytics.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private service: AnalyticsService) { }
  ngOnInit(): void {
    this.service.start();
  }
}

social.component.ts（其他在服务实现方面相同）：

import { Component, OnInit } from '@angular/core';
import {AnalyticsService} from '../analytics.service';
declare var $:any;
@Component({
  selector: 'app-skills',
  templateUrl: './skills.component.html',
  styleUrls: ['./skills.component.css']
})
export class SkillsComponent implements OnInit {
  constructor(private service: AnalyticsService) { }

  ngOnInit() {
  }

}

所需：

该服务每30秒向我的API发送一次请求，并带有已存储的会话ID

实际：

该服务仅在重新加载网站时发送一次请求，而不考虑正在查看的组件

Answer 1

正如@Gilsdav所建议的那样，应将其切换到某种外部定时机制，而不是递归地延迟响应内部。还赞同使用Angulars的内置HttpClient而不是使用jquery ajax调用的观点（注意：最后我听说，如果可以避免的话，通常建议不要将jQuery与Angular一起使用）。

从最基本的角度讲，对于任何重复的内容，您都可以避免以下问题：

constructor(private http: HttpClient){}

ngOnInit(): void {
  setInterval(() => { this.sendRequest(); }, 30000);
}

sendRequest(): void {
  this.http.post('https://api.com/aah', data)
    .subscribe((res) => {
      console.log(res);
    });
}

但是您可能希望使用与现有功能更集成的功能（如已经建议的那样使用rxjs等）。

使服务在后台以角度运行

1 个答案: