如何使用角度分2次服，返回HTTP承诺

Question

我有角2这里的麻烦。 我使用返回承诺的服务，但是当我尝试回复响应时出现错误。

我在读这this stact question 这是我的代码。

这是HotelService.ts

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 

//rxjs promises cause angular http return observable natively. 
import 'rxjs/add/operator/toPromise'; 

@Injectable() 
export class HotelService { 

    private BASEURL : any = 'http://localhost:8080/hotel/'; 

    constructor(private http: Http) {} 

    load(): Promise<any> { 
     return this.http.get(this.BASEURL + 'api/client/hotel/load') 
      .toPromise() 
      .then(response => { 
       response.json(); 
       //console.log(response.json()); 
      }) 
      .catch(err => err); 
    } 
} 

这Hotel.ts（组件）

import { Component, OnInit } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

import { HotelService } from '../../providers/hotel/hotelservice'; 

import { AboutPage } from '../../pages/about/about'; 
import { HotelDetailPage } from '../../pages/hoteldetail/hotel'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html', 
    providers: [HotelService] 
}) 
export class HomePage implements OnInit { 

    public searchBoxActive = false; 
    public hotels: any; 

    constructor(
    private navCtrl: NavController, 
    private hotelServ: HotelService 
    ) { } 

    load() { 
    this.hotelServ.load() 
     .then(res => { 
     this.hotels = res; 
     console.log(res); //why the rest is undefined? 
     console.log('ini component'); 
     }, 
     err => err); 
    } 

    toggleSearchBox() { 
    if (this.searchBoxActive == false) { 
     this.searchBoxActive = true; 
    } else { 
     this.searchBoxActive = false; 
    } 
    } 

    showAbout() { 
    this.navCtrl.setRoot(AboutPage); 
    } 

    pushDetail(evt, id) { 
    this.navCtrl.push(HotelDetailPage) 
    } 

    ngOnInit(): void { 
    this.load(); 
    } 
} 

我不知道。

Answer 1

您需要从此承诺回调返回response.json()：

load(): Promise<any> { 
    return this.http.get(this.BASEURL + 'api/client/hotel/load') 
     .toPromise() 
     .then(response => { 
      return response.json(); 
     }) 
     .catch(err => err); 
} 

Answer 2

的dfsq的答案是正确的，但对于完整起见，下面是根据官方Angular.io recommendations一个例子：

load(): Promise<any> { 
    return this.http.get(this.BASEURL + 'api/client/hotel/load') 
     .toPromise() 
     .then(response: Response) => response.json() || {}) 
     .catch((error: Response | any) => 
     { 
      let errMsg: string; 
      if (error instanceof Response) 
      { 
       const body = error.json() || ''; 
       const err = body.error || JSON.stringify(body); 
       errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
      } 
      else 
       errMsg = error.message ? error.message : error.toString(); 

      return Promise.reject(errMsg); 
     }); 
} 

主要区别：

• 在012处理空响应;
• 在投掷前进一步发现错误。