RxJs Observables和http angular2服務

Question

我知道那里有很多關於如何使用RxJs / Observables的教程。

我需要，以了解如何使用觀測量了一些非常簡單的例子http使用angular2服務map ， subscribe和catch方法。

到目前為止，我已經能夠生成服務以便與REST端點進行通信：

@Injectable()
export class UsersApi {
    protected basePath = 'http://localhost:8082/commty/cmng';

    constructor(protected http: Http) {

    }

    public create(user: string, passwd: string, extraHttpRequestParams?: any): Observable<{}> {
        return this.createWithHttpInfo(user, passwd, extraHttpRequestParams)
            .map((response: Response) => {
                if (response.status === 204) {
                    return undefined;
                } else {
                    return response.json();
                }
            });
    }

    public createWithHttpInfo(user: string, passwd: string, extraHttpRequestParams?: any): Observable<Response> {
        const path = this.basePath + `/users`;

        let queryParameters = new URLSearchParams();
        let headers = new Headers(this.defaultHeaders.toJSON()); // https://github.com/angular/angular/issues/6845
        // verify required parameter 'user' is not null or undefined
        if (user === null || user === undefined) {
            throw new Error('Required parameter user was null or undefined when calling create.');
        }
        // verify required parameter 'passwd' is not null or undefined
        if (passwd === null || passwd === undefined) {
            throw new Error('Required parameter passwd was null or undefined when calling create.');
        }


        // to determine the Content-Type header
        let consumes: string[] = [
        ];

        // to determine the Accept header
        let produces: string[] = [
            'application/json'
        ];





        let requestOptions: RequestOptionsArgs = new RequestOptions({
            method: RequestMethod.Put,
            headers: headers,
            search: queryParameters
        });

        // https://github.com/swagger-api/swagger-codegen/issues/4037
        if (extraHttpRequestParams) {
            requestOptions = this.extendObj(requestOptions, extraHttpRequestParams);
        }

        return this.http.request(path, requestOptions);
    }

我使用過map方法，但我不太明白它代表什么。

我將如何使用UserApi.create(user, password)方法？

編輯

由於http.get(...)方法不會在沒有訂閱的情況下執行，因此我發現我需要以下任何東西：

userApi.create('user', 'password').subscribe(...)

有人可以填寫subscribe方法嗎？

Answer 1

map函數獲取Observable獲得的數據，使用提供給它的函數對其進行處理，然后返回一個新的Observable。 您仍然需要訂閱此新的Observable才能開始該過程。

在您的示例中，Observable將僅返回一個響應。 map函數將獲取此響應，如果狀態為204，則將其轉換為undefined，否則將其轉換為所包含的json。

要在此類之外使用它：

class TestClass {
    constructor(private usersApi: UsersApi ) {}

    public testFunction() {
        this.userApi.create("user", "pass").subscribe(
            (result: any) => {       // <-- handler for result
                console.log(result);
            },
            (error: any) => {        // <-- handler for error
                console.log(error);
            },
            () => {                  // <-- handler for done
                console.log("Done");
            },
        );
    }
}

Answer 2

map()只是轉換流事件值。
您可以從作為參數傳遞的流中獲取事件值，可以進行一些轉換（例如response.json() ，結果是以下運算符或subscribe()的新事件值

沒有subscribe（），將不會發生任何事情。 如果您不訂閱，http.get（）將不會導致對服務器的請求。

如果使用| 異步管道，則您無需訂閱。 管子幫你做

Answer 3

您需要subscribe一個Observable函數才能實際執行服務。

UserApi.create(user, password).subscribe(
   res=> {//do stuffs that have remote data "res" here},
   error=> {//do what when "error" happens},
   () => console.log('Completed!')
)