Angular课程：使用Observables处理HTTP请求详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01089/article/details/148647490

Angular课程：使用Observables处理HTTP请求详解

angular-course Official repository for the Angular: From Theory To Practice Book 项目地址: https://gitcode.com/gh_mirrors/ang/angular-course

概述

在Angular开发中，处理HTTP请求是常见的需求。本文将深入探讨如何在Angular应用中使用Observables来处理HTTP请求，这是codecraft-tv/angular-course项目中关于HTTP模块的重要内容。

从Promises到Observables的转变

在之前的实现中，我们使用Promises来处理异步HTTP请求。这种方式虽然有效，但Observables提供了更强大的功能：

可取消性：可以随时取消未完成的请求
组合性：可以轻松组合多个异步操作
响应式编程：更适合构建响应式应用

服务层实现

基础Observable实现

首先，我们需要改造服务层的search方法，使其返回Observable：

search(term: string): Observable<SearchItem[]> {
  const apiURL = `${this.apiRoot}?term=${term}&media=music&limit=20`;
  return this.http.get(apiURL)
    .map(res => {
      return res.json().results.map(item => {
        return new SearchItem(
          item.trackName,
          item.artistName,
          item.trackViewUrl,
          item.artworkUrl30,
          item.artistId
        );
      });
    });
}

关键点：

http.get()返回的是Observable<Response>
使用map操作符将Response转换为SearchItem[]
需要导入RxJS的map操作符

组件层实现

基本订阅方式

最简单的使用方式是在组件中直接订阅：

doSearch(term: string) {
  this.loading = true;
  this.itunes.search(term).subscribe(data => {
    this.loading = false;
    this.results = data;
  });
}

使用async管道

更优雅的方式是使用async管道：

results: Observable<SearchItem[]>;

doSearch(term: string) {
  this.loading = true;
  this.results = this.itunes.search(term)
    .do(() => this.loading = false);
}

模板中使用：

<div *ngFor="let item of results | async">...</div>

响应式表单集成

创建响应式搜索

我们可以将搜索框改造为响应式表单：

searchField: FormControl;

ngOnInit() {
  this.searchField = new FormControl();
  this.results = this.searchField.valueChanges
    .debounceTime(400)
    .distinctUntilChanged()
    .switchMap(term => this.itunes.search(term));
}

操作符详解

debounceTime(400)：防抖，只在用户停止输入400ms后才触发
distinctUntilChanged()：只有搜索词变化时才触发
switchMap()：取消前一个未完成的请求，只处理最新的

加载状态处理

使用do操作符处理加载状态：

this.results = this.searchField.valueChanges
  .debounceTime(400)
  .distinctUntilChanged()
  .do(() => this.loading = true)
  .switchMap(term => this.itunes.search(term))
  .do(() => this.loading = false);