NativeScript HttpClient和Observable

时间:2018-01-26 09:07:54

标签: angular nativescript

我正在尝试使用HttpClient发出GET请求,我想要一个Observable返回。

问题是HttpClient不向服务器发出请求,如果我使用subscribe请求正确完成。 我通过检查nginx access.log文件检查,没有subscribe()没有请求发送到服务器,我得到一个空的Observable。

没有错误,没有警告但没有调用服务器...... 我在哪里做错了?

tns版本: 3.4.1

app.modules.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptFormsModule } from "nativescript-angular/forms"; 
import { NativeScriptHttpClientModule } from "nativescript-angular/http-client"; // Nuovo modulo angular HTTP

import { Database } from "./providers/database/database";
import { HttpErrorInterceptorProvider } from "./common/http_error_interception";

import { AppRoutingModule } from "./app.routing";

import { AppComponent } from "./app.component";
import { UserComponent } from "./user/user.component";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptHttpClientModule,
        NativeScriptModule,
        NativeScriptFormsModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent,
        UserComponent
    ],
    providers: [
        HttpErrorInterceptorProvider
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})

export class AppModule { }

user.ts

export interface User {
  "id": number,
  "email": string,
  "profile_type": string,
  "status": number,
  "token_access": string,
  "profile": Array<any>,
  "type" : string,
  "cached_at" : number
}

user.service.ts

import { HttpClient, HttpHeaders, HttpParams } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from 'rxjs/Observable';

import * as ApplicationSettings from "application-settings";

import { User } from "./user";

@Injectable()
export class UserService {
  constructor(
    private _http: HttpClient
  ) { }

  getUser(): Observable<User> {
    let headers = new HttpHeaders({
      "Content-Type": "application/json",
      "Accept": "application/json",
      "Authorization": "Bearer 1234567890"
    });

    let params = new HttpParams().set('expand', 'profile');

    return this._http.get<User>('http://localhost:8080/v1/customer/user/me', { headers:headers, params: params });
  }
}

user.component.ts

import { Component, OnInit } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { Database } from "../providers/database/database";
import * as ApplicationSettings from "application-settings";

import { User } from "./user";
import { UserService } from "./user.service";
import { Observable } from 'rxjs/Observable';

@Component({
  selector: "ns-user",
  moduleId: module.id,
  providers: [ UserService ],
  templateUrl: "./user.html",
})
export class UserComponent implements OnInit {
  public user: Observable<User>;

  constructor(
    private router: RouterExtensions,
    private userService: UserService
  ) { }

  public ngOnInit(): void {
    // tbd
  }

  public onTap(): void {
    console.log("TAP!");
    this.user = this.userService.getUser();
  }
}

1 个答案:

答案 0 :(得分:1)

对于(Angular)Http调用工作,您需要订阅该事件,否则该调用仅被声明并且从未实际调用过。如果调用成功,订阅也会出现错误返回,以及调用成功时的完成事件