今天完成的事情：
HTTP客户端
功能：
请求类型化响应对象的能力
简化的错误处理
各种特性的可测试性
请求和响应的拦截机制
服务器通讯的准备工作：
导入 Angular 的 HttpClientModule
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
// import HttpClientModule after BrowserModule.
HttpClientModule,
],
declarations: [
AppComponent,
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
注入依赖：
在服务文件中
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class ConfigService {
constructor(private http: HttpClient) { }
}
添加可观察对象
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';
从服务器请求数据：
获取的端点 URL，以及一个可以用来配置请求的选项对象
options: {
headers?: HttpHeaders | {[header: string]: string | string[]},
observe?: 'body' | 'events' | 'response',
params?: HttpParams|{[param: string]: string | string[]},
reportProgress?: boolean,
responseType?: 'arraybuffer'|'blob'|'json'|'text',
withCredentials?: boolean,
}
observe 选项用于指定要返回的响应内容
responseType 选项指定返回数据的格式
第6步：从服务端获取数据：
启用 HTTP 服务
HttpClient 是 Angular 通过 HTTP 与远程服务器通讯的机制
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
HttpClientModule,
],
})
模拟数据服务器
从 npm 中安装这个内存 Web API 包：
npm install angular-in-memory-web-api --save
在app.module.ts中导入
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';
将其添加到 imports 数组中，并为参数对其进行配置
HttpClientModule,
HttpClientInMemoryWebApiModule.forRoot(
InMemoryDataService, { dataEncapsulation: false }
)
forRoot() 配置方法接收一个 InMemoryDataService 类来初始化内存数据库
创建数据服务文件
ng generate service InMemoryData
问题：
forRoot()有什么用
从服务器请求数据没弄明白
http的含义和用处
明天的计划：
学习http服务，完成数据的获取
返回列表
评论