HttpClient

  使用例

    app.module

      import { HttpClientModule } from '@angular/common/http';@NgModule({imports: [BrowserModule,HttpClientModule,

    服务类

      import { HttpClient } from '@angular/common/http';constructor(private http: HttpClient) {}// 取得列表this.http.get<{type: string, price: number}[]>('/assets/shipping.json');httpOptions = {headers: new HttpHeaders({ 'Content-Type': 'application/json' })};// 更新return this.httpClient.put(this.heroesUrl, hero, this.httpOptions).pipe(tap(_ => this.log(`updated hero id=${hero.id}`)),catchError(this.handleError('updateHero')));// 添加return this.httpClient.post(this.heroesUrl, hero, this.httpOptions).pipe(tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),catchError(this.handleError('addHero')));// 删除return this.httpClient.delete(url, this.httpOptions).pipe(tap(_ => this.log(`deleted hero id=${id}`)),catchError(this.handleError('deleteHero')));// 搜索return this.httpClient.get(`${this.heroesUrl}/?name=${term}`).pipe(tap(_ => this.log(`found heroes matching "${term}"`)),catchError(this.handleError('searchHeroes', [])));// 错误处理private handleError(operation = 'operation', result?: T) {return (error: any): Observable => {// TODO: リモート上のロギング基盤にエラーを送信するconsole.error(error); // かわりにconsoleに出力// TODO: ユーザーへの開示のためにエラーの変換処理を改善するthis.log(`${operation} failed: ${error.message}`);// 空の結果を返して、アプリを持続可能にするreturn of(result as T);};}

  从服务器请求数据

    使用 HttpClient.get() 方法从服务器获取数据。
    该异步方法会发送一个 HTTP 请求，并返回一个 Observable，它会在收到响应时发出所请求到的数据。

    返回的类型取决于你调用时传入的 observe 和 responseType 参数。
    get() 方法有两个参数。要获取的端点 URL，以及一个可以用来配置请求的选项对象。

      options: {headers?: HttpHeaders | {[header: string]: string | string[]},observe?: 'body' | 'events' | 'response',             // 默认bodyparams?: HttpParams|{[param: string]: string | number | boolean | ReadonlyArray},reportProgress?: boolean,responseType?: 'arraybuffer'|'blob'|'json'|'text',    // 默认jsonwithCredentials?: boolean,}

    observe 和 response 选项的类型是字符串的联合类型，而不是普通的字符串。
      正确：client.get('/foo', {responseType: 'text'})
      错误：TypeScript 会把 options 的类型推断为 {responseType: string}。
            const options = {
              responseType: 'text',
            };
            client.get('/foo', options)
            
      正确：使用 as const，可以让 TypeScript 知道确实想使用常量字符串类型
            const options = {
              responseType: 'text' as const,
            };
            client.get('/foo', options);
 

    读取完整的响应体

      getConfigResponse(): Observable> {return this.http.get(this.configUrl, { observe: 'response' });}this.configService.getConfigResponse().subscribe(resp => {// display its headersconst 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 请求
      在 Angular 中，通过在 NgModule 的 imports 中包含 HttpClientJsonpModule 来使用 JSONP。

        searchHeroes(term: string): Observable {term = term.trim();const heroesURL = `${this.heroesURL}?${term}`;// 'callback'是服务端接收的要包含回调函数名的参数名称return this.http.jsonp(heroesUrl, 'callback').pipe(catchError(this.handleError('searchHeroes', [])) // then handle the error);}this.searchHeroes('王').subscribe(data => {this.data = data;})

  处理请求错误

    private handleError(error: HttpErrorResponse) {if (error.status === 0) {// 出现客户端或网络错误。相应地处理。console.error('An error occurred:', error.error);} else {// 后端返回了一个不成功的响应代码。// 响应主体可能包含出现问题的线索。console.error(`Backend returned code ${error.status}, body was: `, error.error);}// Return an observable with a user-facing error message.return throwError(() => new Error('Something bad happened; please try again later.'));}getConfig() {return this.http.get(this.configUrl).pipe(retry(3), // 最多重试3次失败的请求catchError(this.handleError) // 然后处理错误);}

  拦截请求和响应

    借助拦截机制，你可以声明一些拦截器，它们可以检查并转换从应用中发给服务器的 HTTP 请求。
    这些拦截器还可以在返回应用的途中检查和转换来自服务器的响应。多个拦截器构成了请求/响应处理器的双向链表。
    拦截器可以用一种常规的、标准的方式对每一次 HTTP 的请求/响应任务执行从认证到记日志等很多种隐式任务。

    Angular 会按你提供拦截器的顺序应用它们。
    请求时：HttpClient->拦截器1->拦截器2...->拦截器N->HttpBackend->服务器
    响应时：HttpClient<-拦截器1<-拦截器2...<-拦截器N<-HttpBackend<-服务器
    
    如果必须修改请求体，请执行以下步骤。
      复制请求体并在副本中进行修改。
      使用 clone() 方法克隆这个请求对象。
      用修改过的副本替换被克隆的请求体。

    示例：

// 设置默认请求头
@Injectable()
export class AuthInterceptor implements HttpInterceptor {constructor(private auth: AuthService) {}intercept(req: HttpRequest, next: HttpHandler) {const authToken = this.auth.getAuthorizationToken();// Clone the request and replace the original headers with// cloned headers, updated with the authorization.const authReq = req.clone({headers: req.headers.set('Authorization', authToken)});return next.handle(authReq);}
}
// 请求响应日志
@Injectable()
export class LoggingInterceptor implements HttpInterceptor {constructor(private messenger: MessageService) {}intercept(req: HttpRequest, next: HttpHandler) {const started = Date.now();let ok: string;// extend server response observable with loggingreturn next.handle(req).pipe(tap({// Succeeds when there is a response; ignore other eventsnext: (event) => (ok = event instanceof HttpResponse ? 'succeeded' : ''),// Operation failed; error is an HttpErrorResponseerror: (error) => (ok = 'failed')}),// Log when response observable either completes or errorsfinalize(() => {const elapsed = Date.now() - started;const msg = `${req.method} "${req.urlWithParams}" ${ok} in ${elapsed} ms.`;this.messenger.add(msg);}));}
}
// 可以在单独文件中引入所有拦截器
export const httpInterceptorProviders = [{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },{ provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true },
];
// 加到 AppModule 的 providers array 中
providers: [ httpInterceptorProviders ],

  将元数据传递给拦截器

    HttpClient 请求包含一个上下文，该上下文可以携带有关请求的元数据。
    该上下文可供拦截器读取或修改，尽管发送请求时它并不会传输到后端服务器。
    这允许应用程序或其他拦截器使用配置参数来标记这些请求，比如重试请求的次数。

    创建上下文令牌

      export const RETRY_COUNT = new HttpContextToken(() => 3);

        HttpContextToken 创建期间传递的 lambda 函数 () => 3 有两个用途：
          它允许 TypeScript 推断此令牌的类型：HttpContextToken。这个请求上下文是类型安全的 —— 从请求上下文中读取令牌将返回适当类型的值。
          它会设置令牌的默认值。如果尚未为此令牌设置其他值，那么这就是请求上下文返回的值。使用默认值可以避免检查是否已设置了特定值。

    在发起请求时设置上下文值

      this.httpClient.get('/data/feed', {context: new HttpContext().set(RETRY_COUNT, 5),}).subscribe(results => {/* ... */});

    在拦截器中读取上下文值

      export class RetryInterceptor implements HttpInterceptor {intercept(req: HttpRequest, next: HttpHandler): Observable> {const retryCount = req.context.get(RETRY_COUNT);return next.handle(req).pipe(// Retry the request a configurable number of times.retry(retryCount),);}}

    上下文是可变的（Mutable）

      并且在请求的其他不可变转换过程中仍然存在。这允许拦截器通过此上下文协调来操作。

      export const RETRY_COUNT = new HttpContextToken(() => 3);export const ERROR_COUNT = new HttpContextToken(() => 0);export class RetryInterceptor implements HttpInterceptor {intercept(req: HttpRequest, next: HttpHandler): Observable> {const retryCount = req.context.get(RETRY_COUNT);return next.handle(req).pipe(tap({// An error has occurred, so increment this request's ERROR_COUNT.error: () => req.context.set(ERROR_COUNT, req.context.get(ERROR_COUNT) + 1)}),// Retry the request a configurable number of times.retry(retryCount),);}}

  跟踪和显示请求进度

    要想发出一个带有进度事件的请求，你可以创建一个 HttpRequest 实例，并把 reportProgress 选项设置为 true 来启用对进度事件的跟踪。

      const req = new HttpRequest('POST', '/upload/file', file, {reportProgress: true});

      每个进度事件都会触发变更检测，所以只有当需要在 UI 上报告进度时，你才应该开启它们。
      当 HttpClient.request() 和 HTTP 方法一起使用时，可以用 observe: 'events' 来查看所有事件，包括传输的进度。

    接下来，把这个请求对象传给 HttpClient.request() 方法，该方法返回一个 HttpEvents 的 Observable（与 拦截器 部分处理过的事件相同）。

	  return this.http.request(req).pipe(map(event => this.getEventMessage(event, file)),tap(message => this.showProgress(message)),last(), // return last (completed) message to callercatchError(this.handleError(file)));private getEventMessage(event: HttpEvent, file: File) {switch (event.type) {case HttpEventType.Sent:return `Uploading file "${file.name}" of size ${file.size}.`;case HttpEventType.UploadProgress:// Compute and show the % done:const percentDone = event.total ? Math.round(100 * event.loaded / event.total) : 0;return `File "${file.name}" is ${percentDone}% uploaded.`;case HttpEventType.Response:return `File "${file.name}" was completely uploaded!`;default:return `File "${file.name}" surprising upload event: ${event.type}.`;}}

  安全：XSRF 防护

    跨站请求伪造 (XSRF 或 CSRF)是一个攻击技术，它能让攻击者假冒一个已认证的用户在你的网站上执行未知的操作。
    HttpClient 支持一种通用的机制来防范 XSRF 攻击。
    当执行 HTTP 请求时，一个拦截器会从 cookie 中读取 XSRF 标记（默认名字为 XSRF-TOKEN），并且把它设置为一个 HTTP 头 X-XSRF-TOKEN，由于只有运行在你自己的域名下的代码才能读取这个 cookie，因此后端可以确认这个 HTTP 请求真的来自你的客户端应用，而不是攻击者。
    默认情况下，拦截器会在所有的修改型请求中（比如 POST 等）把这个请求头发送给使用相对 URL 的请求。但不会在 GET/HEAD 请求中发送，也不会发送给使用绝对 URL 的请求。

    你的服务器需要在页面加载或首个 GET 请求中把一个名叫 XSRF-TOKEN 的标记写入可被 JavaScript 读到的会话 cookie 中。
    这个标记必须对每个用户都是唯一的，并且必须能被服务器验证，因此不能由客户端自己生成标记。把这个标记设置为你的站点认证信息并且加了盐（salt）的摘要，以提升安全性。
    为了防止多个 Angular 应用共享同一个域名或子域时出现冲突，要给每个应用分配一个唯一的 cookie 名称。

    配置自定义 cookie/header 名称
      如果你的后端服务中对 XSRF 标记的 cookie 或头使用了不一样的名字，就要使用 HttpClientXsrfModule.withOptions() 来覆盖掉默认值。

      imports: [HttpClientModule,HttpClientXsrfModule.withOptions({cookieName: 'My-Xsrf-Cookie',headerName: 'My-Xsrf-Header',}),],

异步取值

  方法返回Observable，属性定义为正常：

    heroes: Hero[] = [];this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);

  方法返回Observable，属性定义为Observable，输出时使用async管道：

    shippingCosts!: Observable<{ type: string, price: number }[]>;this.shippingCosts = this.cartService.getShippingCosts();