多次调用get方法

Question

好的，我在 angular-cli 服务中有以下方法，我用它来“实时”更新 table，管道和水龙头，它们按我想要的方式工作，坏处是它不断发出 http.get 请求，显然这就是它利用浏览器内存所做的事情。我知道我可以制作一个 POST 方法并添加管道并点击那里，我在我的界面中添加了一个按钮来添加一条新记录并且它会实时更新（这是有效的并且是理想的）。不幸的是，我使用的 http.POST 方法在 .dart / flutter 中。这就是为什么我在我的 angular http.GET getOrders 方法中使用 pipe 和 tap 的原因，所以我发现自己在观察变化，但我想要的是只要有变化就观察变化。但是正在发生的事情是，在调用 API 之后调用询问是否添加了另一条新记录，如果它是正确的，它会更新视图。我该如何解决？

control-de-carga-service.ts

     private _refresh$ = new Subject<void>();

     get refresh$(){
         return this._refresh$;
     }

    getPedidos():Observable<any>{
     let headers = new HttpHeaders().set('Content-Type','application/x-www-form-urlencoded');
     return this._http.get(this.url+'control-de-carga/pedidos',{headers: headers})
     .pipe(
        tap(() => {
          this._refresh$.next();
        })
     );
   }

和小腿-linea.component.ts

    ngOnInit(): void {
       this.getPedidos();
       this.subscription = this._controlCargaService.refresh$.subscribe(() 
        => {
           this.getPedidos();
       })
    }

    getPedidos(): void {
       this._controlCargaService.getPedidos().subscribe(
       (res) =>{ 
                this.pedidos_list = res;
                console.log(res);
              },
       (err) => console.error(err)
     );
   }

Answer 1

我认为如果您想实时做事，最好的解决方案是使用 websokcets 而不是 HTTP 请求。

另一个解决方案，您可以每 N 秒执行一次该方法（当然，在这种情况下它不会实时但看起来像实时）。

希望对你有所帮助！

Answer 2

你做了一个无限循环，订阅 getPedidos() 调用 refresh$.next() 然后调用 getPedidos() 然后调用 refresh$.next() 等等...

HttpClient 发出单个请求，然后完成可观察。通常，您会将此请求与刷新按钮之类的事件相关联，或者在特定时间间隔发出请求。在您的情况下，您刚刚创建了一个无限循环，每次收到响应时，您都会立即发出另一个请求。

如果您希望后端在更改时 ping 前端，那么您的后端需要能够打开网络套接字，以便客户端和后端可以保持连接。您将不得不对此进行一些研究并将其应用于您的具体案例。

这里有一些资源可以帮助您入门：

https://indepth.dev/tutorials/angular/how-to-implement-websockets-in-angular-project https://javascript-conference.com/blog/real-time-in-angular-a-journey-into-websocket-and-rxjs/ https://docs.flutter.dev/cookbook/networking/web-sockets

多次调用get方法

multiple calls in get method

rxjs

dart

flutter

angular