angular2：問題與休息api

Question

我想學習angular2（來自PHP腳本，這是相當困難^^），使用真正的休息api在「英雄之旅」。 從我讀，我認爲這可能是簡單的...

我有一個工作的API，建有快遞：

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... 

在hero.service.ts，我可以得到的數據：

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上原來的「英雄之旅」，我有數據的數組，而在這裏我有一個字符串... 我想我必須轉換某處字符串，但無論我嘗試，它不起作用。

（我看過很多例子與可觀測太多，但我也沒有成功）

幫助想解釋我如何... TIA

JP

Answer 1

你是如此接近！這裏的錯誤在於你如何處理承諾，以及誤解他們如何返回。在這種情況下，當您試圖強制response.json()爲類型Hero[]然後返回時，試圖分配未定義的屬性（response.json().data）。

你需要做的是確保你有一個匹配的類型來分配你的響應，當它被轉換爲與該json()調用的JSON。本指南中的Hero類型與您的回覆不匹配，因此會出現錯誤。

要檢查您是否收到回覆，請撥打該服務的getHeroes()函數並記錄返回的值。可以在內部記錄該函數，但這將是理解Promise如何深入工作的幫助，將比任何事情都更有幫助。

getHeroes(): Promise<Hero[]> { 

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

如果你想知道我不瘋狂，這裏是內部登錄的代碼。無論收到什麼類型，都應記錄您的回覆。

getHeroes(): Promise<Hero[]> { 

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

如需進一步文脈融入你爲什麼做這些then()電話，許諾返回異步這意味着一個不確定的時間過去之後，結果纔有效。必須等待結果的任何執行必須發生在then()調用中，或者函數返回實際值之後。由於JS函數同步運行，如果您嘗試執行以下示例，則會看到undefined的打印輸出，而不是字符串響應。這是因爲console.log(r)在promise調用之後立即被調用，完全沒有意識到它實際上並沒有爲r賦值。

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

}