Angular 6/RxJS 6中如何处理http.get()请求结果？升级遇语法难题

我帮你梳理下从 Angular 5 升级到 Angular 6 时，RxJS 语法的核心变化，以及如何改造你的 SearchService 代码。

首先，RxJS 6 最大的变化就是操作符从原型链导入改为可管道（pipeable）操作符，同时 Observable 的导入路径也简化了。咱们一步步来改：

1. 修正 RxJS 导入语句 #

原来的 RxJS 导入方式是通过补丁扩展 Observable 的原型：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

在 RxJS 6 里，要改成直接导入 Observable 和需要的操作符：

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

2. 改造 HTTP 请求的结果处理 #

Angular 6 里的 HttpClient.get() 默认返回 Observable<any>，如果你想获得类型安全的返回值，可以通过泛型指定类型（比如假设你的 people.json 是 Person 数组）。另外，所有操作符（比如 map）都需要放在 pipe() 方法里链式调用，不再直接挂在 Observable 实例上。

完整迁移后的 SearchService 示例 #

假设你的 search 方法是根据关键词过滤人员列表，改造后的代码如下：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// 定义类型（可选，但推荐）
interface Person {
  id: number;
  name: string;
  // 其他字段根据你的 JSON 结构补充
}

@Injectable({
  providedIn: 'root' // Angular 6+ 推荐用 providedIn 替代模块声明，自动注册根级单例
})
export class SearchService {
  constructor(private http: HttpClient) {}

  getAll(): Observable<Person[]> {
    // 用泛型指定返回类型，让 TypeScript 提供类型检查和智能提示
    return this.http.get<Person[]>('assets/data/people.json');
  }

  search(q: string): Observable<Person[]> {
    return this.getAll().pipe(
      // 把原来的 map 操作符放进 pipe 里，支持多个操作符链式组合
      map(people => people.filter(person => 
        person.name.toLowerCase().includes(q.toLowerCase())
      ))
    );
  }
}

关键变化说明 #

• providedIn: 'root'：Angular 6 引入的新特性，无需在模块的 providers 数组里声明服务，自动注册为根级单例，简化了配置。
• Pipeable 操作符：所有像 map、filter、switchMap 这类操作符都要从 rxjs/operators 导入，然后通过 pipe() 组合使用，替代了原来的链式调用（比如 obs.map(...).filter(...) 变成 obs.pipe(map(...), filter(...))）。
• 泛型返回值：HttpClient.get<T>() 可以指定返回数据的类型，避免 any 类型的松散性，让代码更健壮。

如果你的 search 方法是直接带查询参数请求后端接口，也可以用类似逻辑处理：

search(q: string): Observable<Person[]> {
  return this.http.get<Person[]>('api/people', {
    params: { keyword: q }
  }).pipe(
    // 按需添加结果处理操作符
    map(response => response)
  );
}

内容的提问来源于stack exchange，提问作者Matt Raible