如何使用Angular2使用REST API？

products.service.ts

getProducts(){ 
this.headers = new Headers(); 
this.headers.append("Content-Type", 'application/json'); 
this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token')); 
return this.http.get('http://mydomain.azurewebsites.net/api/products',{headers:headers}).map(res => res.json().data); 
}

products.component.ts

constructor(private productsService: ProductsService) { } 

ngOnInit() { 
this.productsService.getProducts().subscribe((res) => { 
    console.log(res); 
}); 
}

是否nescessary在ngModule裝飾進口的東西使用REST API或我的代碼錯誤？我可以通過Postman Chrome擴展程序獲取所需數據，但不能使用Angular 2代碼。

我希望能很好地解釋我的問題。

更新

這是我得到的錯誤：

來源

2016-10-06 Elkin

你會得到什麼，而不是你期望的數據？一個錯誤？一點都沒有？ –

看起來像你有404，但沒有處理_subscribe_中的錯誤。 – Nicolai

您可以檢查開發人員窗口中的網絡選項卡，查看實際請求是否發送到哪個URL？ –

對不起，讓你浪費你的時間。

這就是問題所在：

app.module.ts

providers: [ 
    ProductsService, 
    // { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server 
    // { provide: SEED_DATA, useClass: InMemoryDataService }  // in-mem server data 
    ]

評論的in-mem server和與in-mem server data問題dissapeared後。

來源

2016-10-07 10:14:49 Elkin

你不是在請求中設置標頭。您聲明Headers對象，但您實際上沒有做任何事情。

你需要把它們設置在這樣的get功能：

return this.http 
      .get('http://mydomain.azurewebsites.net/api/products', { headers: headers }) 
      .map(res => res.json().data);

來源

2016-10-06 23:10:03 Brad

對不起，實際上我已經設置了標題，但是複製並粘貼了錯誤。無論如何感謝您的關注。 – Elkin

如何使用Angular2使用REST API？

回答

相關問題