Send multiple requests using rxjs, http in Angular4
using Rxjs to request data in Angular4.x, it is found that multiple requests will result in 1 request times, which will greatly affect performance. At present, we can only use the most clumsy order to declare the corresponding Subscription objects one by one to manually unsubscribe, which does not feel normal. I would like to ask for a better solution. The sample code is as follows:
service:
getRuleHitList(): any {
const formData = {
"uuid": this.orderNo
};
this.$http
.post(this.HOST.host + "/api/bqsBlackList", formData)
.subscribe(res => {
console.log(res);
this.RuleHitSubject.next(res);
})
}
component:
ruleSubscription: Subscription;
getRule() {
this.service.getRuleHitList();
this.ruleSubscription = this.service.RuleHitSubject.subscribe(res => {
if (res && res.code === "0") {
if (res.strategySet || res.Rule) {
this.ruleListFlag = true;
this.ruleList = res;
}
} else {
this.ruleListFlag = false;
}
this.ruleSubscription.unsubscribe()
})
the above getRule will be used many times on the current page, and the component will not be destroyed, so the manual unsubscription page without adding unsubscribe () will become more and more stuck. I always feel that I am not using it correctly. Please do not hesitate to comment.
it's complicated for you to do this.
you first send a http request in component by calling the getHttpRuleList () method in service, then subscribe to the result of this request, pass it to RuleHitSubject , and subscribe to this RuleHitSubject in component to get the result returned by http. Isn't that a bit superfluous?
first of all, the http request can be subscribed without having to subscribe directly, we can directly return this observable.
then subscribe directly in component to the observable, that treats subscriptions in component as the end of a stream.
so your code can be changed to this:
service:
getRuleHitList(): Observable<any> {
const formData = {
'uuid': this.orderNo
};
return this.$http.post(this.HOST.host + '/api/bqsBlackList', formData)
}
component:
ruleSubscription: Subscription = null;
getRule() {
if (this.ruleSubscription === null) {
this.ruleSubscription = this.service.getRuleHitList().subscribe(res => {
if (res && res.code === '0') {
if (res.strategySet || res.Rule) {
this.ruleListFlag = true;
this.ruleList = res;
}
} else {
this.ruleListFlag = false;
}
});
}
for subscriptions, subscriptions are usually unsubscribed when the component is destroyed, in case there are more and more subscription references in the application.
ngOnDestroy() {
if (this.ruleSubscription) {
this.ruleSubscription.unsubscribe();
}
}
getRuleHitList(): any {
const formData = {
'uuid': this.orderNo
};
return this.$http
.post(this.HOST.host + '/api/bqsBlackList', formData);
}
ruleSubscription: Subscription;
getRule() {
this.service.getRuleHitList().subscribe(res => {
if (res && res.code === '0') {
if (res.strategySet || res.Rule) {
this.ruleListFlag = true;
this.ruleList = res;
}
} else {
this.ruleListFlag = false;
}
});
}
http returns a Observable stream, so you don't need to subscribe to the service definition request flow.
getRuleHitList().subscribe(res => {
...
})
