Angular4中使用rxjs， http請求多次發(fā)送

在Angular4.x中使用Rxjs請求數(shù)據(jù)，發(fā)現(xiàn)多次請求會造成n+1次請求次數(shù)，極大地影響性能，目前只能采用最笨拙的依次聲明對應Subscription對象一一手動取消訂閱，感覺不是正常辦法，想請教更好的解決方式，示例代碼如下：

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()
    })

上述getRule會在當前頁面多次用到,且component不會銷毀,因此不加unsubscribe()手動取消訂閱頁面會越來越卡，總感覺自己用的不對，請大佬不吝賜教;

回答

編輯回答

背叛者

http 返回一個 Observable<any> 流，所以你在服務定義請求流的時候不需訂閱。

getRuleHitList(): any {
  const formData = {
    ...
  }
  return this.$http.post(this.HOST.host + '/api/bqsBlackList', formData)
}

同時組件使用的時候不用考慮注銷訂閱，angular 自動執(zhí)行取消訂閱。

getRuleHitList().subscribe(res => {
    ...
})

2017年4月28日 20:46

編輯回答

傲寒

你這么做就復雜了啊。。。

你首先在component一個調(diào)用service中的getHttpRuleList()方法來發(fā)一個http請求，然后訂閱了這個請求的結果，并將這個結果傳遞給了RuleHitSubject, 又在component中來訂閱這個RuleHitSubject，來拿到http返回的結果，是不是有點多此一舉了呢？

首先，http請求可以不用直接就訂閱的，我們可以直接返回這個observable。
然后在component中直接訂閱這個observable，將component中的訂閱作為一個流的終點。

所以你的代碼可以改成這樣：

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;
        }
    });
 }

而針對訂閱，通常都要在組件銷毀的時候來取消訂閱，以防訂閱的引用在應用中越來越多。

ngOnDestroy() {
    if (this.ruleSubscription) {
        this.ruleSubscription.unsubscribe();
     }
}

2017年12月15日 08:21

編輯回答

涼心人

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;
        }
    });
    
}

2017年6月12日 09:29