每 5 秒自动运行一次函数（Angular）

Question

我有一个从后端获取数据的 Angular 组件。

这是组件的代码

 export class MessagesComponent implements OnInit {
  constructor(private _router: Router, private http: HttpClient) {
  }
  timer: any;
  chats: any;
  autoresize: boolean = false;
  chatId: number;
  moment: any = moment;
  chatMessages: any;
  messageToSend: string;
  messageObject: CreateMessageDto = new CreateMessageDto();
  ngOnInit(): void {
    this.getChatsList();

  }


  getChatsList(): any {
    var reqHeader = new HttpHeaders({
      'Content-Type': 'application/json',
      Authorization: 'Bearer ' + localStorage.getItem('jwt'),
    });
    return this.http
      .get(environment.baseUrl + '/Chat/GetUserChats', {
        headers: reqHeader,
      })
      .subscribe((data: any) => {
        this.chats = data.reverse();
        this.getChatId(data[0].id);
      });
  }

  getChatId(chatId: number): any {
    this.chatId = chatId;
    this.getChatMessages();
  }


  getChatMessages(): any {
    var reqHeader = new HttpHeaders({
      'Content-Type': 'application/json',
      Authorization: 'Bearer ' + localStorage.getItem('jwt'),
    });

    return this.http
      .post(
        environment.baseUrl + '/Messages/GetChatMessages',
        JSON.stringify(this.chatId),
        { headers: reqHeader }
      )
      .subscribe((data: any) => {
        this.chatMessages = data;

      });

  }

  createMessage(): any {
    this.messageObject.chatId = this.chatId;
    var reqHeader = new HttpHeaders({
      'Content-Type': 'application/json',
      Authorization: 'Bearer ' + localStorage.getItem('jwt'),
    });
    return this.http
      .post(
        environment.baseUrl + '/Messages/CreateMessage',
        JSON.stringify(this.messageObject),
        { headers: reqHeader }
      )
      .subscribe((data: any) => {
        this.getChatMessages();
      });
  }
}

我需要 getChatsList()在 componenet 初始化后每 5 秒运行一次

我怎样才能做到这一点？

Answer 1

使用interval rxjs函数每秒调用一次。

  import { interval } from 'rxjs';

  ngOnInit(): void {
      interval(5000).subscribe(() => {
          this.getChatsList();
      });
  }