Angular 6代码转换求助：后端JSON读取方法重构问题

嗨，这问题我熟！Angular 6用的是RxJS 6+，同时HttpClient也做了简化，正好帮你把这段代码重构好：

首先得明确两个核心变化：

• Angular 6的HttpClient默认会自动把响应解析成JSON，再也不用手动调用data.json()了
• RxJS 6+ 废弃了链式调用操作符的写法，必须用pipe()来包裹操作符，而且所有操作符都要单独导入

先看重构后的完整代码：

第一步：导入必要的依赖 #

// 导入RxJS相关模块
import { Observable, interval } from 'rxjs';
import { switchMap } from 'rxjs/operators';
// 导入Angular的HttpClient
import { HttpClient } from '@angular/common/http';

第二步：重构getHeroes方法 #

getHeroes(): Observable<Hero[]> {
  return interval(5000).pipe(
    // 这里用switchMap代替原来的flatMap，RxJS 6推荐用switchMap（功能一致）
    switchMap(() => this.http.get<Hero[]>(this.heroesUrl))
  );
}

额外说明： #

1. 确保你的模块（比如AppModule）已经导入了HttpClientModule，不然HttpClient没法用：

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

@NgModule({
  imports: [
    // ...其他模块
    HttpClientModule
  ]
})
export class AppModule { }

2. 如果你坚持想用flatMap而不是switchMap，只需要把导入的switchMap换成flatMap，方法里的switchMap改成flatMap就行，两者功能是等价的，只是RxJS 6更推荐switchMap作为标准命名。
3. http.get<Hero[]>里的泛型<Hero[]>是让TypeScript帮你做类型校验，确保返回的数据结构符合Hero数组的格式，非常实用。

这样重构后就完全符合Angular 6的规范啦，而且代码更简洁易读～

内容的提问来源于stack exchange，提问作者Unknown Angel