Понимание HTTP в Angular 2 tutorial

Я прошел через Угловое 2 Tour of Heroes учебник, и я не понимаю lesson on using HTTP для получения данных из службы.Понимание HTTP в Angular 2 tutorial

В этом уроке службы героя переменная heroesUrl объявлена как «приложение/герои».

private heroesUrl = 'app/heroes'; // URL to web api 

    constructor(private http: Http) { } 

    getHeroes(): Promise<Hero[]> { 
    return this.http.get(this.heroesUrl) 
       .toPromise() 
       .then(response => response.json().data as Hero[]) 
       .catch(this.handleError); 
    }

Данные объявлены в службе в памяти-данных в виде статического массива:

import { InMemoryDbService } from 'angular-in-memory-web-api'; 

export class InMemoryDataService implements InMemoryDbService { 
    createDb() { 
    let heroes = [ 
     { id: 11, name: 'Mr. Nice (api)' }, 
     { id: 12, name: 'Narco' }, 
     { id: 13, name: 'Bombasto' }, 
     { id: 14, name: 'Celeritas' }, 
     { id: 15, name: 'Magneta' }, 
     { id: 16, name: 'RubberMan' }, 
     { id: 17, name: 'Dynama' }, 
     { id: 18, name: 'Dr IQ' }, 
     { id: 19, name: 'Magma' }, 
     { id: 20, name: 'Tornado' }, 
     { id: 21, name: 'Mister Man' } 
    ]; 
    return { heroes }; 
    } 
}

Но в модуле маршрутизации «героев» (которые я предполагаю такой же, как «приложение/героев ") указывает на HeroesComponent.

const routes: Routes = [ 
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, 
    { path: 'dashboard', component: DashboardComponent }, 
    { path: 'detail/:id', component: HeroDetailComponent }, 
    { path: 'heroes', component: HeroesComponent } 
];

В HeroesComponent функция getHeroes() вызывает this.heroService.getHeroes() функцию:

getHeroes(): void { 
    //Result of heroService.getHeroes is a Promise 
    this.heroService.getHeroes().then(heroesresult => this.heroes = heroesresult); 
    }

На поверхности это выглядит как HeroesComponent.getHeroes() вызовов HeroService.getHeroes() который затем делает http.get назад к HeroesComponent, а не к источнику данных.

Все это работает для меня (как магия), но нет объяснения того, как данные, находящиеся в службе данных в памяти, извлекаются вызовом от HeroesService до this.http.get(this.heroesUrl).

Может ли кто-нибудь помочь мне разобраться?

источник

2016-11-28 Walter Sung

'частное heroesUrl =«приложение/герои»; // URL-адрес веб-api', это просто URL-адрес моделирования, когда вы разрабатываете собственное приложение, просто замените этот URL-адрес на ваш URL-адрес. – eugene

Это определенно не волшебство.

Что происходит, вы вызываете запрос на получение в память api!

Посмотрите in-memory-api

В принципе, класс InMemoryDataService, простирается от InMemoryDbService, который создает в памяти апи наблюдаемым.

Думайте об этом как о заглушке, созданной «на лету», а затем, когда вы вызываете метод get, вызов будет перенаправлен на этот пакет (через xhrbackend), а затем вы получите список героев. ,

источник

2016-11-28 10:48:40 Milad

Aaah, я думаю, что получаю его сейчас. Спасибо @ xe4me. –

URL-адрес приложения/героев не относится к «героям» модуля маршрутизации. Это относится к объекту данных героев в in-memory-data-service.ts. Так что это не волшебство; URL-адрес относится только к объекту данных, а не к пути.

документация на https://angular.io/tutorial/toh-pt6 слишком лаконичным, чтобы быть ясно, и я сделал предложения для того, что должно быть улучшено в https://github.com/angular/angular.io/issues/3559

источник

2017-08-24 19:41:55

Понимание HTTP в Angular 2 tutorial

ответ

Смежные вопросы