Как использовать REST API с Angular2?

#javascript #rest #angular #typescript

Вопрос:

Это мой демонстрационный код:

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, но не с помощью кода Angular 2.

Я надеюсь, что хорошо объяснил свою проблему.

Обновить

Это ошибки, которые я получаю:

1. Что вы получаете вместо ожидаемых данных? Ошибка? Совсем ничего?

2. похоже, у вас есть 404, но у вас нет обработчика в subscribe для ошибки.

3. Можете ли вы проверить вкладку сеть в окне разработчика, чтобы увидеть, на какой URL отправляется фактический запрос?

Ответ №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 проблема исчезла.

Ответ №2:

Вы не задаете заголовки в запросе. Вы объявляете Headers объект, но на самом деле ничего с ним не делаете.

Вам нужно установить их в get функции следующим образом:

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

Ответ №3:

Я бы посоветовал вам использовать ngx-rest-ex: https://www.npmjs.com/package/ngx-rest-ex

 npm i -S ngx-rest-ex

Это удобно, вам просто нужно указать соответствующий декоратор поверх метода и возвращаемый тип, он заменит тело вашего метода. Возвращаемый тип может быть любым Promise или Observable в зависимости от указанной вами аннотации МЕТОДА HTTP.

Мой демонстрационный код для вашего случая:

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