当前位置：文江博客话题详情

每秒收到API的更新

发布于 2025-02-04 12:02:19 字数 79 浏览 3 评论 0原文

Angular RXJS代码进行API调用，以从API服务获取信息但是，我需要每秒提出请求。我了解我需要使用可观察到的东西，但不确定如何进行。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

橪书 2025-02-11 12:02:19

您可以使用rxjs Interval 投票操作员。

回复收藏 0 原文

等风也等你 2025-02-11 12:02:19

此方法应效果很好（在伪代码中）

interval
   pipe(
     exhaustMap 
        forkJoin
   )

注意：date> dyailmap如果Interval事件，则如果forkjoin花费超过1s，则它将每1秒继续

This approach should work well (in pseudo code)

interval
   pipe(
     exhaustMap 
        forkJoin
   )

Note: the exhaustMap will ignore the interval event if the forkJoin takes longer than 1s, and then it will continue every 1s

回复收藏 0 原文

十年九夏 2025-02-11 12:02:19

您可以将Intervel（）使用每个x毫秒。您可以在pipe（） dyale> dyale> dyale> dyalemmap（）中执行forkjoin（）。

@Injectable({ providedIn: 'root' })
export class ExampleService {
  private readonly INTERVAL = 1000;

  constructor(private readonly _http: HttpClient) {}

  getInformation$(id: number): Observable<publicInformation> {
    return timer(0, this.INTERVAL).pipe(
      exhaustMap(() =>
        forkJoin({
          name: this._http.get<name>(`api/name/${id}`),
          currentInformation: this._http.get<CurrentInformations>(
            `api/currentInformation/${id}`
          ),
        })
      )
    );
  }
}

订阅类似的组件可观察到：
注意：您也可以使用一个数组，此示例只使用了两个不同的属性。

<div *ngIf="information1$ | async as data">
  <p>Name: {{ data.name.first }} {{ data.name.last }}</p>
  <p>
    {{ data.name.first }}'s Current Time: {{ data.currentInformation.current }}
  </p>
</div>

<hr />

<div *ngIf="information2$ | async as data">
  <p>Name: {{ data.name.first }} {{ data.name.last }}</p>
  <p>
    {{ data.name.first }}'s Current Time: {{ data.currentInformation.current }}
  </p>
</div>

组件：

export class AppComponent {

  information1$ = this.exampleService.getInformation$(123);
  information2$ = this.exampleService.getInformation$(456);

  constructor(private exampleService: ExampleService) {}
}

这是一个有效的示例

注意：请参阅 intercept服务查看虚拟网络API的工作方式。如果存在实际的API，则不需要。

You can use interval() to ping the server every x milliseconds. You can the do the forkJoin() in the pipe() within an exhaustMap().

@Injectable({ providedIn: 'root' })
export class ExampleService {
  private readonly INTERVAL = 1000;

  constructor(private readonly _http: HttpClient) {}

  getInformation$(id: number): Observable<publicInformation> {
    return timer(0, this.INTERVAL).pipe(
      exhaustMap(() =>
        forkJoin({
          name: this._http.get<name>(`api/name/${id}`),
          currentInformation: this._http.get<CurrentInformations>(
            `api/currentInformation/${id}`
          ),
        })
      )
    );
  }
}

Subscribe to the component's Observable like this:
Note: You could have used an array too, this example just uses two different properties.

<div *ngIf="information1$ | async as data">
  <p>Name: {{ data.name.first }} {{ data.name.last }}</p>
  <p>
    {{ data.name.first }}'s Current Time: {{ data.currentInformation.current }}
  </p>
</div>

<hr />

<div *ngIf="information2$ | async as data">
  <p>Name: {{ data.name.first }} {{ data.name.last }}</p>
  <p>
    {{ data.name.first }}'s Current Time: {{ data.currentInformation.current }}
  </p>
</div>

The component:

export class AppComponent {

  information1$ = this.exampleService.getInformation$(123);
  information2$ = this.exampleService.getInformation$(456);

  constructor(private exampleService: ExampleService) {}
}

Here is a working example

Note: See the intercept service to see how the dummy network api works. This isn't needed if an actual API exists.

回复收藏 0 原文

~没有更多了~