• HttpClient服务对象用于向指定的URL发送异步的请求，实现与后端服务的通信
  • HttpClient发起异步请求的步骤：
    • HttpClient需要在主模块中导入HttpClientModule模块
    • 在组件中声明依赖于HttpClient服务的对象，通过这个对象发起异步请求
    • 处理接受到的数据信息
  • 发起异步请求的方法： | 原生XHR | 基于回调函数处理，容易出现回调地狱 | | —- | —- | | ajax | XHR的封装，底层还是通过回调，回调地狱仍然存在 | | axios | 进一步封装XHR，但是基于Promise处理相应，解决了回调地狱的问题 | | HttpClient | 底层依旧是XHR，基于观察者模式处理相应消息，请求可以排队，并发，撤销请求 | | fetch | 不再基于XHR，是W3C提出的一个新的概念，兼容性不高，基于promise |

1、通过HttpClient请求数据

1.1、导入HttpClientModule

  • 在主模块中导入HttpClientModule模块

    1. imports: [
    2. // Angular用于Web项目需要导入BrowserModule
    3. BrowserModule,
    4. //导入HttpClientModule模块
    5. HttpClientModule
    6. ]

    1.2、声明依赖

  • 在组件中声明HttpClient依赖，获取依赖对象，通过依赖对象向服务端发送请求

    1. export class HttpClietTestComponent{
    2. //声明HttpClient依赖对象
    3. constructor(private http: HttpClient) { }
    4. }

    1.3、发送请求

  • 通过声明的HttpClient依赖对象，发送http请求，get、put、post、request等请求

  • 在HttpClient中不使用promise处理返回结果，而是使用订阅者模式subscribe进行数据的处理

    1. @Component({
    2. selector: 'app-http-cliet-test',
    3. templateUrl: './http-cliet-test.component.html',
    4. styleUrls: ['./http-cliet-test.component.css']
    5. })
    6. export class HttpClietTestComponent{
    7. //声明HttpClient依赖对象
    8. constructor(private http: HttpClient) { }
    9. //使用HttpClient对象发送异步请求
    10. getGitUser() {
    11.   this.http.get("https://api.github.com/users/lukas")
    12.     //Angular中不采取Promise，而是采用观察者模式subscribe
    13.     .subscribe(data => {
    14.       console.log(data);
    15.     })
    16. }
    17. }

  • 点击按钮，在控制台可以看到返回的data数据

image.png

2、观察者Subscribe

  • 从后台获取数据，subscribe监听获取到的数据，对数据进行处理，由于后台数据格式未知的情况下，接收数据类型定义为any ```typescript @Component({ selector: ‘app-subscribe-com’, templateUrl: ‘./subscribe-com.component.html’, styleUrls: [‘./subscribe-com.component.css’] }) export class SubscribeComComponent{ //定义为private类型，提供存取器函数，此处默认类型是any[]，开发中根据需求定义对应的Object[] private _gitUsers = []; constructor(private http: HttpClient) { }

get gitUsers() { return this._gitUsers; }

getGitUser(): void{ this.http.get(‘https://api.github.com/users‘) //返回值类型设置为any .subscribe((res: any) => { this._gitUsers = res; console.log(this._gitUsers) }); } }

  2. - 模板循环遍历展示gitUsers列表数据中的id和login属性
  3. ```html
  4. <span *ngIf="gitUsers.length === 0">无数据</span>
  5. <table>
  6.   <tr *ngFor="let giter of gitUsers">
  7.     <td>{{giter['id']}}</td>
  8.     <td>{{giter['login']}}</td>
  9.   </tr>
  10. </table>
  11. <button (click)="getGitUser()">获取用户列表</button>
  • 点击按钮后界面

image.png

3、组件的声明周期

  • Angular中组件声明周期钩子函数调用顺序，ngOnInit和ngOnDestory函数比较常用和重要 | 钩子方法 | 用途 | 时机 | | —- | —- | —- | | ngOnChanges()：绑定属性发生变化时触发 | 当 Angular 设置或重新设置数据绑定的输入属性时响应。 该方法接受当前和上一属性值的 SimpleChanges 对象
    注意，这发生的非常频繁，所以你在这里执行的任何操作都会显著影响性能。 欲知详情，参阅本文档的使用变更检测钩子。 | 如果组件绑定过输入属性，那么在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。
    注意，如果你的组件没有输入属性，或者你使用它时没有提供任何输入属性，那么框架就不会调用 ngOnChanges()。 | | ngOnInit()：组件初始化函数 | 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。 欲知详情，参阅本文档中的初始化组件或指令。 | 在第一轮 ngOnChanges() 完成之后调用，只调用一次。而且即使没有调用过 ngOnChanges()，也仍然会调用 ngOnInit()（比如当模板中没有绑定任何输入属性时）。 | | ngDoCheck()：组件检测到系统对组件本身的营销 | 检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。 欲知详情和范例，参阅本文档中的自定义变更检测。 | 紧跟在每次执行变更检测时的 ngOnChanges() 和 首次执行变更检测时的 ngOnInit() 后调用。 | | ngAfterContentInit()：组件内容初始化完成 | 当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。
    欲知详情和范例，参阅本文档中的响应内容中的变更。 | 第一次 ngDoCheck() 之后调用，只调用一次。 | | ngAfterContentChecked()：组件内容发生变化，标签中的内容发生改变xxx，中的xxx发生变化 | 每当 Angular 检查完被投影到组件或指令中的内容之后调用。
    欲知详情和范例，参阅本文档中的响应被投影内容的变更。 | ngAfterContentInit() 和每次 ngDoCheck() 之后调用 | | ngAfterViewInit()：组件的视图初始化完成 | 当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。
    欲知详情和范例，参阅本文档中的响应视图变更。 | 第一次 ngAfterContentChecked() 之后调用，只调用一次。 | | ngAfterViewChecked()：组件视图的内容发生改变,template发生改变 | 每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。 | ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。 | | ngOnDestroy()：组件即将被销毁，从DOM树中移除；完成资源回收操作，例如定时器的销毁 | 每当 Angular 每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。 欲知详情，参阅本文档中的在实例销毁时进行清理。 | 在 Angular 销毁指令或组件之前立即调用。 |