angular2：rest apiの問題

Question

「Tour of Heroes」で実際の残りのAPIを使用して、angle2（PHPスクリプトから来て、それはかなり難しいです^^）を学ぼうとしています。私は、データを取得することができhero.service.tsで

curl -XGET http://localhost:3001/heroes 
[{"_id":"58185c8a8af4b512c51c0519","no":"1","name":"bahamut","__v":0,"updated_at":"2016-11-01T09:12:42.803Z"},{"_id":"58185ca78af4b512c51c051a","no":"2","name":"gatz","__v":0,"updated_at":"2016-11-01T09:13:11.063Z"},{"_id":"58185ec98af4b512c51c051b","no":"3","nam... 

、：：私が読んだものから は、私が働いて、API、Expressで構築されてきた

...それは単純なものと考えていた

getHeroes(): Promise<Hero[]> { // {{{ 
    console.log('getheroes in service'); 
    console.log("%o", this.http.get(this.heroesUrl).toPromise()); 
    return this.http.get(this.heroesUrl) 
       .toPromise() 
       .then(response => response.json().data as Hero[]) 
       .catch(this.handleError); 
    } // }}} 

console screenshot

私はオリジナルの「英雄のツアー」で同じにconsole.logを行うと、ここで私は、文字列を持っているのに対し、私はデータの配列を持っている... 私は文字列をどこかに変換しなければならないと思うが、何を試しても動作しない。あなたはとても近くにいるJP

Answer 1

TIA

...

ヘルプがどのように私を説明したかった

は（私も観察可能で多くの例を読んで、私はどちらか成功していません）！ここでの間違いは、あなたがプロミスをどのように扱い、それがどう戻ってくるのか誤解していることです。この場合、response.json()をタイプHero[]に強制して戻すことを意味するときに、未定義のプロパティ（response.json().data）を割り当てようとしていました。

あなたが行う必要があることは、json()呼び出しを使用してJSONに変換したときに応答を割り当てるためのタイプが一致していることを確認することです。ガイドのHeroタイプがあなたの応答と一致しないため、エラーが発生します。

応答を受信して​​いることを確認するには、サービスのgetHeroes()関数を呼び出し、返された値を記録します。機能に内部的にログを記録することはできますが、Promisesがどのように深く働くかを理解することが何よりも役立つでしょう。

getHeroes(): Promise<Hero[]> { 

    return this.http.get(this.heroesUrl) 
       .toPromise() 
       .then((response) => response.json() as Hero[]) 
       .catch(this.handleError); 
} 

私が狂っているのではないことを知りたい場合は、ここで内部的にログするコードをご覧ください。これにより、受信したタイプに関係なくレスポンスが記録されます。あなたはこれらのthen()の呼び出しを行う理由をさらに文脈のために

getHeroes(): Promise<Hero[]> { 

    return this.http.get(this.heroesUrl) 
       .toPromise() 
       .then((response) => { 
       console.log(response.json()); 
       }) 
       .catch(this.handleError); 
} 

は、約束は非同期で時間の不確定量が経過した後に結果がのみ利用可能であることを意味しを返します。結果を待たなければならない実行は、then()呼び出しで発生するか、関数が実際の値を返した後に発生する必要があります。次の例を実行しようとすると、JS関数が同期して実行されるため、文字列応答ではなくundefinedという印刷物が表示されます。これは、console.log(r)が約束の呼び出しの直後に呼び出され、実際にはに値を割り当てさせていないという事実を完全に知らないからです。

getHeroes(): Promise<Hero[]> { 
     var r; 
     this.http.get(this.heroesUrl) 
       .toPromise() 
       .then((response) => r = response.json()) 
       .catch(this.handleError); 
     console.log(r); 

}