-1

在hero.service.tsAngular 的快速入门示例文件中，第 7 步是这段代码：

@Injectable()
export class HeroService {

  private headers = new Headers({'Content-Type': 'application/json'});
  private heroesUrl = 'api/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);
  }
}

我试图像这样将它翻译成我的应用程序：

@Injectable()
export class MyService {

  private headers = new Headers({'Content-Type': 'application/json'});
  private dataUrl = 'api/data';  // URL to web api

  constructor(private http: Http) { }

  getHeroes(): Promise<Hero[]> {
    return this.http.get(this.dataUrl) // <-- error here
               .toPromise()
               .then(response => response.json().data as MyData[])
               .catch(this.handleError);
  }
}

我在网上得到了一个404 - Collection数据，这是完全可以理解的，因为它只是一个随机路径。该端点没有 API。not foundthis.http.get

问题： Angular 示例是如何工作的？它在哪里注册了api/heroes模拟 HTTP 请求的路径？

4

1 回答 1

1

使用 Angular 的常规 HTTP 模块时，命令：

return this.http.get(this.dataUrl)

期望this.dataUrl是一个包含真实 HTTP Web 服务地址的字符串。（如"http://swapi.co/api/people/1/"。）

在“常规使用”中，该命令将向位于的 HTTP 服务发出请求this.dataUrl。


但是...您的代码取自本教程，这有点改变。


如果您还记得的话，本教程要求您将以下内容添加InMemoryWebApiModule到您的@NgModule：

import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';
...

@NgModule({
  imports: [
    ...
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    AppRoutingModule
  ],
  ...
})

您添加的那些行创建了一个服务，粗略地说，它会劫持您的 http 请求，阻止它们到达您提供的 URL 的真实服务器（例如myserver.com/api/heroes），而是使这些请求转到假服务器。

（有关详细信息，请注意InMemoryWebApiModule来自angular-in-memory-web-api。因此请查看https://github.com/angular/in-memory-web-api以了解其工作原理。）

现在，那个假服务器必须返回一些有用的数据。它从何而来？

这就是 的“第二部分”InMemoryWebApiModule.forRoot(InMemoryDataService)发挥InMemoryDataService作用的地方。

在来自Angular 文档的演示中，请注意InMemoryDataService在以下位置定义'./in-memory-data.service'：

import { InMemoryDbService } from 'angular-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const heroes = [
      { id: 0,  name: 'Zero' },
      ...
    ];
    return {heroes};
  }
}

现在，这里的重要部分是返回命令return {heroes};。（如果您不熟悉语法，那是 的缩写return {heroes: heroes};）。

该返回对象的键定义了假服务器上的可用 URL。

由于您要返回{heroes: <something>}，因此 URLapi/heroes将在假服务器上可用。如果您返回{foo: <something>}，则该 URLapi/foo将可用。

如果你想api/data有空，然后返回类似的东西{data: ...}：

createDb() {
  const data = [
    { id: 0, name: 'AAAA' },
    { id: 1, name: 'BBBB' },
    ...
  ];
  return {data};
}

就是这样，这就是你需要改变的。

现在，请记住，对于生产（真实）代码，您应该删除整个InMemoryWebApiModule.forRoot(InMemoryDataService)内容并让真实的 Web 服务在this.dataUrl.

于 2017-09-03T02:47:49.983 回答