如何使用Angular2使用REST API？

Question

这是我的演示代码：

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); 
 });
}

是否必须在ngModule装饰器中导入一些内容以使用REST API或我的代码是错误的？我可以使用Postman Chrome Extension获得所需数据，但不能使用Angular 2代码。

我希望能很好地解释我的问题。

更新

这些是我得到的错误：

Answer 1

很抱歉让你浪费时间。

这就是问题：

<强> 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之后问题消失了。

Answer 2

您没有在请求中设置标头。您声明了Headers对象，但实际上并没有对它做任何事情。

您需要在get函数中设置它们，如下所示：

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

Answer 3

我建议您使用 ngx-rest-ex ：https://www.npmjs.com/package/ngx-rest-ex

npm i -S ngx-rest-ex

这很方便，您只需要在方法和返回类型的顶部指定相应的装饰器，它将替换您的方法主体。返回类型可以是Promise或Observable，具体取决于您指定的HTTP METHOD注释。

我针对您的案例的演示代码：

import { Injectable, Injector } from '@angular/core';
import { BaseUrl, GET, RESTClient } from 'ngx-rest-ex';

import { Product } from './models';


@Injectable({
    providedIn: 'root'
})
@BaseUrl('http://mydomain.azurewebsites.net/api/')
export class ApiService extends RESTClient {

    constructor(injector: Injector) { super(injector); }

    protected getDefaultHeaders() {
        return {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + localStorage.getItem('id_token')
        };
    }

    @GET('products')
    getProducts(): Promise<Product[]> {
        return;
    }
}