今天完成的事情：
使用 HTTP 与后端服务进行通信
HTTP 客户端服务主要功能：
请求类型化响应对象的能力
简化的错误处理
各种特性的可测试性
请求和响应的拦截机制
服务器通讯的准备工作
使用 HttpClient，要先导入 Angular 的 HttpClientModule。在app.module.ts中
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
// import HttpClientModule after BrowserModule.
HttpClientModule,
],
declarations: [
AppComponent,
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
把 HttpClient 服务注入成一个应用类的依赖项，在服务config.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class ConfigService {
constructor(private http: HttpClient) { }
}
HttpClient 服务使用可观察对象。导入范例代码片段中出现的 RxJS 可观察对象和操作符
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';
从服务器请求数据
showConfig() {
this.configService.getConfig()
.subscribe((data: Config) => this.config = {
heroesUrl: data.heroesUrl,
textfile: data.textfile
});
}
请求输入一个类型的响应
config.service.ts中
getConfig() {
return this.http.get<Config>(this.configUrl);
}
config.component.ts 中
config: Config;
showConfig() {
this.configService.getConfig()
.subscribe((data: Config) => this.config = { ...data });
}
读取完整的响应体
showConfigResponse() {
this.configService.getConfigResponse()
// resp is of type `HttpResponse<Config>`
.subscribe(resp => {
// display its headers
const keys = resp.headers.keys();
this.headers = keys.map(key =>
`${key}: ${resp.headers.get(key)}`);
// access the body directly, which is typed as `Config`.
this.config = { ... resp.body };
});
}
发起 JSONP 请求
当服务器不支持 CORS 协议时，应用程序可以使用 HttpClient 跨域发出 JSONP 请求。
Angular 的 JSONP 请求会返回一个 Observable
searchHeroes(term: string): Observable {
term = term.trim();
const heroesURL = `${this.heroesURL}?${term}`;
return this.http.jsonp(heroesUrl, 'callback').pipe(
catchError(this.handleError('searchHeroes', [])) // then handle the error
);
}
请求非 JSON 数据
getTextFile(filename: string) {
// The Observable returned by get() is of type Observable<string>
// because a text response was specified.
// There's no need to pass a <string> type parameter to get().
return this.http.get(filename, {responseType: 'text'})
.pipe(
tap( // Log the result or error
data => this.log(filename, data),
error => this.logError(filename, error)
)
);
}
问题：
未完成，看不懂范例
明天计划：
继续学习http服务
返回列表
评论