如何在 Angular 应用程序中取消订阅 http post 请求？

Question

它是由 AWS 的 API Gateway 创建的 POST API，但它总是返回无限重复的数组，如下图所示。如何只返回一个数组？

Mutiple requests

这是代码

角度

import { Component, OnInit, ViewChild, OnChanges, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http'; 
import { GetService } from '../get.service';
import { Observable, Subject } from 'rxjs';
import { IonSlides, IonSlide } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit   {
  protected ngUnsubscribe: Subject<void> = new Subject<void>();


constructor(public http:HttpClient) {}
  @ViewChild(IonSlides,{'static':false}) slides: IonSlides;

  slideOpts = {
    initialSlide: 1,
    speed: 400
 };
public result:any
public res:any
data:Observable<any>;
ata:Observable<any>;

ngOnInit(){
}

  getdata(){


   this.ata=this.http.post("XXXXXXXXXXXXXXXXXXXXXXXXX",{"freq":1});
   this.ata.subscribe(data=>{console.log(data)})

  return   this.res




}
INDEX:any

slideChanged() {

  this.INDEX =this.slides.getActiveIndex().then(data=>console.log(data))
  return this.INDEX

}
   }

HTML

   <ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>
<p *ngFor="let a of getdata()">{{a}}</p >
<ion-card>
  <ion-card-content>
  <ion-slides  [options]="slideOpts" (ionSlideWillChange)="slideChanged()">
    <ion-slide  >
        <h1></h1>
    </ion-slide>
s


  </ion-slides>
</ion-card-content>
</ion-card>

Answer 1

这不是 API。为什么我确定这一点？因为您使用的是 Angular 的 HttpClient 并且您需要围绕它的大量样板来发出多个请求。 您的问题是因为 您的页面多次渲染，而 Angular 的渲染管理页面布局。

真正的问题在于这一行：

<p *ngFor="let a of getdata()">{{a}}</p >

每次渲染该行时，角度调用getdata() 发出另一个请求。

您必须将结果列表与请求它的函数分离。 从您的代码看来ata 是Observable。像下面这样的东西应该可以工作：

<p *ngFor="let a of ata | async">{{a}}</p>

请注意使用的async 管道。

From Angular documentation

async 管道订阅 Observable 或 Promise 并返回它发出的最新值。当发出新值时，async 管道标记要检查更改的组件。当组件被销毁时，async 管道会自动取消订阅以避免潜在的内存泄漏。

当然你必须在某个地方打电话给getdata()，通常正确的地方是ngOnInit()。

旁注：如何从 Observable 订阅中仅获得一个响应

由于在这个问题中，如果您只需要从 Observable 获得一个响应，那么在这个主题上存在混淆，常见的方法是使用 take 运算符。

import { take } from 'rxjs/operators';

[...]

someService.getObservable(...)
           .pipe( take(1) ) // <-- take first response
           .subscribe( (r) => { ... } );