[英]How to unsubscribe http post request in Angular application?
Its a POST API created by API Gateway from AWS, however it always returns infinite repetition of arrays as you see in the below picture.它是由 AWS 的 API Gateway 创建的 POST API,但它总是返回无限重复的数组,如下图所示。 How to return only one array?如何只返回一个数组?
Here's the code这是代码
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 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>
That is not the API.那不是API。 Why am I sure about this?为什么我对这个有把握? Because you're using Angular's HttpClient and you need quite a bit of boilerplate around it to make multiple requests.因为您正在使用 Angular 的 HttpClient 并且您需要相当多的样板来发出多个请求。 Your issue is because your page is renderer multiple times while Angular's rendered manages the page layout.您的问题是因为您的页面多次渲染,而 Angular 的渲染管理页面布局。
The real issue lies at this line:真正的问题在于这一行:
<p *ngFor="let a of getdata()">{{a}}</p >
Everytime that line is rendered angular calls getdata()
issuing another request.每次渲染该行时,angular 都会调用getdata()
发出另一个请求。
You must decouple the result list from the function requesting it.您必须将结果列表与请求它的函数分离。 From your code seems like ata
is an Observable
.从你的代码看来ata
是一个Observable
。 Something like the following should work:像下面这样的东西应该工作:
<p *ngFor="let a of ata | async">{{a}}</p>
Please note the async
pipe used.请注意使用的async
管道。
From Angular documentation来自 Angular 文档
The
async
pipe subscribes to anObservable
orPromise
and returns the latest value it has emitted.async
管道订阅Observable
或Promise
并返回它发出的最新值。 When a new value is emitted, theasync
pipe marks the component to be checked for changes.当发出新值时,async
管道会标记要检查更改的组件。 When the component gets destroyed, theasync
pipe unsubscribes automatically to avoid potential memory leaks.当组件被销毁时,async
管道会自动取消订阅以避免潜在的内存泄漏。
Of course you must call getdata()
somewhere and usually the right place is in ngOnInit()
.当然,您必须在某处调用getdata()
并且通常正确的位置在ngOnInit()
。
Side note: How to get only one response from an Observable subscription旁注:如何仅从 Observable 订阅中获得一个响应
Since in this question there is confusion on this topic if you need to get only one response from an Observable the common way is to use take
operator.由于在这个问题中,如果您只需要从 Observable 中获得一个响应,那么在这个主题上存在混淆,因此常用的方法是使用take
运算符。
import { take } from 'rxjs/operators';
[...]
someService.getObservable(...)
.pipe( take(1) ) // <-- take first response
.subscribe( (r) => { ... } );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.