最近在使用Angular作为前端框架进行开发时发现各版本存在一定的差异，尤其是对于依赖架包的引入，网上搜集了一些资料进行整理，主要需要注意以下几点。
1、http的调用，以Angular4.3为分界点
1）、import方式
| 旧版 | 新版(>V4.3) |
|---|---|
|
import { Http } from ‘@angular/http‘;
|
import { HttpClient } from ‘@angular/common/http‘;
|
|
import { Headers } from ‘@angular/http‘;
|
import { HttpHeaders } from ‘@angular/common/http‘;
|
| import { Request } from ‘@angular/http‘; | import { HttpRequest } from ‘@angular/common/http‘; |
|
import { Response } from ‘@angular/http‘;
|
import { HttpResponse } from ‘@angular/common/http‘; |
|
......
|
...... |
2）、调用示例
| 调用方式 | 旧版 | 新版(>V4.3) |
| get | http.get(url).map(response: Response) => { response.json().xxxx进行引用 } | httpClient.get(url).pipe(map(item => item[‘xxxxxx‘])); } |
| post |
headers = new Headers({‘Content-type‘: ‘application/json‘}); |
headers = new HttpHeaders({‘Content-type‘: ‘application/json‘});
httpClient.post(url)put(url, JSON.stringify(body),{headers: headers}).pipe(map(item => { |
| put |
headers = new Headers({‘Content-type‘: ‘application/json‘}); |
headers = new HttpHeaders({‘Content-type‘: ‘application/json‘});
httpClient.put(url)put(url, JSON.stringify(body),{headers: headers}).pipe(map(item => { |
| delete |
http.delete(url).map(response: Response) => { response.json().xxxx进行引用 } |
httpClient.delete(url).pipe(map(item => item[‘xxxxxx‘])); } |
|
对Observable值进行subscribe的使用：.subscribe(respose => { 使用response进行引用 }) |
||
2、rxjs的变换，以rxjs6为分界点
1）、import方式
| import类型 | 旧版 | 新版(rxjs6) |
| Observable | import { Observable } from ‘rxjs/observable‘; | import { Observable } from ‘rxjs‘; |
| map | import ‘rxjs/add/operator/map‘; | import { map } from ‘rxjs/operators‘; |
| fromPromise | import ‘rxjs/add/observable/fromPromise‘; | import { fromPromise } from ‘rxjs‘; |
2）、API重命名
| 旧版 | 新版(rxjs6) |
| do() | tap() |
| catch() | catchError() |
| switch() | switchAll() |
| finally() | finalize() |
| throw() | throwError() |
| 新版(rxjs6)operators全部集中到rxjs/operator下进行管理 | |
具体的使用得空整理出旧版、新版的http工具类。
原文：https://www.cnblogs.com/54hsh/p/11490711.html