修订完server-communication

This commit is contained in:
Zhicheng Wang 2017-04-15 22:39:40 +08:00
parent 70e77a29ef
commit a50bf1832e

View File

@ -369,7 +369,7 @@ a#HeroService
:marked :marked
## Fetch data with _http.get()_ ## Fetch data with _http.get()_
## 通过 http.get 获取数据 ## 通过 `http.get()` 获取数据
In many of the previous samples the app faked the interaction with the server by In many of the previous samples the app faked the interaction with the server by
returning mock heroes in a service like this one: returning mock heroes in a service like this one:
@ -397,6 +397,7 @@ a#HeroService
Look closely at how to call `http.get`: Look closely at how to call `http.get`:
仔细看看我们是如何调用`http.get`的 仔细看看我们是如何调用`http.get`的
+makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'http-get', 'src/app/toh/hero.service.ts (getHeroes)')(format=".") +makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'http-get', 'src/app/toh/hero.service.ts (getHeroes)')(format=".")
:marked :marked
@ -487,7 +488,7 @@ a#extract-data
Remember that the `getHeroes()` method used an `extractData()` helper method to map the `http.get` response object to heroes: Remember that the `getHeroes()` method used an `extractData()` helper method to map the `http.get` response object to heroes:
记住,`getHeroes()`借助一个`extractData`辅助方法来把`http.get`的响应对象映射成了英雄列表: 记住,`getHeroes()`借助一个`extractData()`辅助方法来把`http.get`的响应对象映射成了英雄列表:
+makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'extract-data', 'src/app/toh/hero.service.ts (excerpt)')(format=".") +makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'extract-data', 'src/app/toh/hero.service.ts (excerpt)')(format=".")
@ -616,6 +617,7 @@ a#hero-list-component
h3 #[b HeroListComponent] error handling h3 #[b HeroListComponent] error handling
h3 #[b HeroListComponent] 错误处理 h3 #[b HeroListComponent] 错误处理
block hlc-error-handling block hlc-error-handling
:marked :marked
Back in the `HeroListComponent`, in `heroService.getHeroes()`, Back in the `HeroListComponent`, in `heroService.getHeroes()`,
@ -651,7 +653,7 @@ block hlc-error-handling
You'll write a method for the `HeroListComponent` to call, a `create()` method, that takes You'll write a method for the `HeroListComponent` to call, a `create()` method, that takes
just the name of a new hero and returns an `Observable` of `Hero`. It begins like this: just the name of a new hero and returns an `Observable` of `Hero`. It begins like this:
我们将为`HeroListComponent`创建一个简单的`addHero()`方法,它将接受新英雄的名字 我们将为`HeroListComponent`创建一个简单的`create()`方法,它将接受新英雄的名字,并且返回一个`Hero`型的`Observable`,代码如下
+makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'create-sig')(format=".") +makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'create-sig')(format=".")
@ -667,7 +669,7 @@ block hlc-error-handling
structured like a `Hero` entity but without the `id` property. structured like a `Hero` entity but without the `id` property.
The body of the request should look like this: The body of the request should look like this:
我们的[数据服务器](#server)遵循典型的 REST 指导原则。 我们的[数据服务器](#in-mem-web-api)遵循典型的 REST 指导原则。
它期待在和`GET`英雄列表的同一个端点上存在一个[`POST`](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5)请求。 它期待在和`GET`英雄列表的同一个端点上存在一个[`POST`](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5)请求。
它期待从请求体 (body) 中获得新英雄的数据,数据的结构和`Hero`对象相同,但是不带`id`属性。 它期待从请求体 (body) 中获得新英雄的数据,数据的结构和`Hero`对象相同,但是不带`id`属性。
请求体应该看起来像这样: 请求体应该看起来像这样:
@ -684,9 +686,10 @@ code-example(format="." language="javascript").
Now that you know how the API works, implement `create()` as follows: Now that you know how the API works, implement `create()` as follows:
现在,知道了这个 API 如何工作,我们就可以像这样实现`addHero()`了: 现在,知道了这个 API 如何工作,我们就可以像这样实现`create()`了:
+makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'import-request-options', 'src/app/toh/hero.service.ts (additional imports)')(format=".") +makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'import-request-options', 'src/app/toh/hero.service.ts (additional imports)')(format=".")
+makeExcerpt('src/app/toh/hero.service.ts', 'create') +makeExcerpt('src/app/toh/hero.service.ts', 'create')
a#headers a#headers
@ -728,7 +731,7 @@ block hero-list-comp-add-hero
Back in the `HeroListComponent`, its `addHero()` method subscribes to the Observable returned by the service's `create()` method. Back in the `HeroListComponent`, its `addHero()` method subscribes to the Observable returned by the service's `create()` method.
When the data arrive it pushes the new hero object into its `heroes` array for presentation to the user. When the data arrive it pushes the new hero object into its `heroes` array for presentation to the user.
回到`HeroListComponent`,我们看到*该组件的*`addHero()`方法中订阅了这个由*服务中*的`addHero()`方法返回的可观察对象。 回到`HeroListComponent`,我们看到*该组件的*`addHero()`方法中订阅了这个由*服务中*的`create()`方法返回的可观察对象。
当有数据到来时,它就会把这个新的英雄对象追加 (push) 到`heroes`数组中,以展现给用户。 当有数据到来时,它就会把这个新的英雄对象追加 (push) 到`heroes`数组中,以展现给用户。
+makeExample('server-communication/ts/src/app/toh/hero-list.component.ts', 'addHero', 'src/app/toh/hero-list.component.ts (addHero)')(format=".") +makeExample('server-communication/ts/src/app/toh/hero-list.component.ts', 'addHero', 'src/app/toh/hero-list.component.ts (addHero)')(format=".")
@ -784,7 +787,7 @@ h2#promises 倒退为承诺 (Promise)
The diagnostic *log to console* is just one more `then()` in the Promise chain. The diagnostic *log to console* is just one more `then()` in the Promise chain.
把诊断信息*记录到控制台*也只是在承诺的处理链中多了一个`then`而已。 把诊断信息*记录到控制台*也只是在承诺的处理链中多了一个`then()`而已。
You have to adjust the calling component to expect a `Promise` instead of an `Observable`: You have to adjust the calling component to expect a `Promise` instead of an `Observable`:
@ -1290,7 +1293,7 @@ block redirect-to-web-api
At the same time, call its `forRoot()` configuration method with the `HeroData` class. At the same time, call its `forRoot()` configuration method with the `HeroData` class.
使用内存 Web API 服务模块很容易配置重定向,将`InMemoryWebApiModule`添加到`AppModule.imports`列表中, 使用内存 Web API 服务模块很容易配置重定向,将`InMemoryWebApiModule`添加到`AppModule.imports`列表中,
同时在`HeroData`类中调用`forRoot`配置方法。 同时在`HeroData`类中调用`forRoot()`配置方法。
+makeExample('server-communication/ts/src/app/app.module.ts', 'in-mem-web-api', 'src/app/app.module.ts')(format=".") +makeExample('server-communication/ts/src/app/app.module.ts', 'in-mem-web-api', 'src/app/app.module.ts')(format=".")
@ -1321,15 +1324,17 @@ block redirect-to-web-api
:marked :marked
Here is the final, revised version of <code>src/app/app.module.ts</code>, demonstrating these steps. Here is the final, revised version of <code>src/app/app.module.ts</code>, demonstrating these steps.
下面是修改过的(也是最终的)<span ngio-ex>app/app.module.ts</span>版本,用于演示这些步骤。 下面是修改过的(也是最终的)`app/app.module.ts`版本,用于演示这些步骤。
+makeExcerpt('src/app/app.module.ts') +makeExcerpt('src/app/app.module.ts')
.alert.is-important .alert.is-important
:marked :marked
Import the `InMemoryWebApiModule` _after_ the `HttpModule` to ensure that Import the `InMemoryWebApiModule` _after_ the `HttpModule` to ensure that
the `XHRBackend` provider of the `InMemoryWebApiModule` supersedes all others. the `XHRBackend` provider of the `InMemoryWebApiModule` supersedes all others.
在`HttpModule`之后导入`InMemoryWebApiModule`,确保`XHRBackend`的供应商`InMemoryWebApiModule`取代所有其它的供应商。 在`HttpModule`之后导入`InMemoryWebApiModule`,确保`XHRBackend`的供应商`InMemoryWebApiModule`取代所有其它的供应商。
:marked :marked
See the full source code in the <live-example></live-example>. See the full source code in the <live-example></live-example>.