每次进行API调用时，您是否需要订阅可观察对象？

Question

当用户点击按钮时，我的component.ts中有一个名为doGET的方法被调用。在doGET方法内部，我订阅了service.ts中返回可观察对象的getData方法。但是每次我点击按钮或调用doGET方法时，它是否都会被订阅？这是在Angular中进行API调用的正确方式吗？ 以下是我的Angular组件代码：

import { Component } from '@angular/core';
import { AppService } from './app.service'
import { Http, Response, RequestOptions, Headers } from '@angular/http';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [AppService]
})

export class AppComponent {
    title = 'app works!';


    constructor(private service: AppService) {

    }

    doGET() {
        this.service.getData().subscribe(res => {
            console.log('result is ', res);
        })

    }

}

以下是 Angular 服务的代码：

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from "@angular/http";

@Injectable()
export class AppService {

    apiRoot: string = "http://httpbin.org";

    constructor(private http: Http) { }

    getData(){
        let url = `${this.apiRoot}/get`;
        return this.http.get(url)
    }
}

- iJade

Answer 1

component.ts

doGET() {
    this.service.getData()
            .subscribe(data => {
                console.log('data', data);
            });
}

service.ts

apiRoot: string = "http://httpbin.org";
getData() {
        let url = `${this.apiRoot}/get`;
        return this.http.get(url)
            .map(res => res.json());
    }

- Chandru

Answer 2

你现在的做法是正确的。Angular的Http服务会在调用结束后自动取消订阅（销毁订阅）。

但是，你可能想要加入一段代码来防止用户连续点击1000次导致多次调用。基本示例：

isGettingData = false;
doGET() {
    if(!this.isGettingData){
        this.isGettingData = true;
        this.service.getData().subscribe(res => {
            console.log('result is ', res);
            this.isGettingData = false;
        });
    }
}

如果您正在创建自己的Observable变量/服务或其他类似内容，当组件被销毁时使用.unsubscribe()是一个好的实践。示例：

myObserver: Observable<Array<any>>;
doGET() {
    this.myObserver= this.route.params.subscribe(params => {})
}

ngOnDestroy(){
    this.myObserver.unsubscribe();
}

这个答案有详细的解释

- P. Moloney