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

Question

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

Mutiple requests

这是代码

Angular

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 >

每次呈现该行时 angular 调用 getdata() 发出另一个请求。

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

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

请注意使用的 async 管道。

From Angular documentation

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

当然你必须在某个地方调用getdata()，通常正确的地方是ngOnInit()。

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

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

import { take } from 'rxjs/operators';

[...]

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

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

How to unsubscribe http post request in Angular application?

api

subscription

unsubscribe

typescript

angular