Angular笔记--HttpClient-与服务器通讯

大多数前端应用都需要通过 HTTP 协议与后端服务器通讯。现代浏览器支持使用两种不同的 API 发起 HTTP 请求：XMLHttpRequest 接口和 fetch() API。

@angular/common/http中的HttpClient类为 Angular 应用程序提供了一个简化的 API 来实现 HTTP 客户端功能。它基于浏览器提供的 XMLHttpRequest 接口。

HttpClient带来的其它优点包括：可测试性、强类型的请求和响应对象、发起请求与接收响应时的拦截器支持，以及更好的、基于可观察（Observable）对象的 API 以及流式错误处理机制。

添加服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
//带类型检查的响应
export class HttpResult<T> {
 Data: T;
 Status: number;
}

@Injectable()
export class ChannelService {

  constructor(private http: HttpClient) { }

  getChannel(id: string) {
    return this.http.post<HttpResult<any>>('api/Portal/Channel/Get', {id:id}).pipe( 
      retry(3), // 对失败的 Observable 自动重新订阅几次
      catchError(this.handleError) // then handle the error 
    );
  }
}

 

添加请求头

很多服务器在进行保存型操作时需要额外的请求头。 比如，它们可能需要一个 Content-Type 头来显式定义请求体的 MIME 类型。 也可能服务器会需要一个认证用的令牌（token）。

@angular/common/http中的HttpHeaders类对象中就定义了一些这样的请求头

import { HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'my-auth-token'
  })
};

发起一个 POST 请求

HttpClient.post()方法它包含一个资源 URL,还接受另外两个参数：

• data- 要 POST 的请求体数据。

• HTTPOtions - 这个例子中，该方法的选项指定了所需的请求头。

//保存表单数据
saveChannel(data) {
  return this.http.post<HttpResult<any>>('api/Portal/Channel/Save', data, httpOptions).pipe( 
   catchError(this.handleError) // then handle the error 
  );
}