Angular6的升級，略有影響的地方應該主要集中在Rxjs6，而至於http，在Angular4.3之後就發生了變化，如果沒有欠債的話，升級應該很簡單。即使有欠債的話，修改的內容也不多。

rxjs的變換

rxjs6主要在包的結構/pipe的使用方式/API的重命名這幾點與舊版本的使用方式不相容的變更，所以導致在實際使用中，有如下的變化

import的方式

常見的一些導入方式：

import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent, combineLatest, SubscriptionLike, PartialObserver,concat,combineLatest } from
 
 ‘rxjs‘;
import { map, filter, scan } from ‘rxjs/operators‘;
import { webSocket } from ‘rxjs/webSocket‘;
import { ajax } from ‘rxjs/ajax‘;
import { TestScheduler } from ‘rxjs/testing‘;

• 1
• 2
• 3
• 4
• 5

API 重命名

整體來說，這次變更使得包的結構更為清晰，缺省利用rxjs進行引用，operator全部集中到rxjs/operator下進行管理

http調用部分

angular的調用可以簡單分為使用Http提供的服務取得Observable的返回值，根據Observable的返回值進行subscribe操作兩段，這裏也簡單地整理一下兩種方式下的使用方法的不同

首先在http調用部分，最大的區別在於直接返回

get

舊版

http為@angular/http下的Http
http.get(url).map(response: Response) => {
    response.json().xxxx進行引用
}

• 1
• 2
• 3
• 4

新版

http為@angular/common/http下的HttpClient
http.get(url).pipe(map(item => item[‘xxxxxx‘]));
}

• 1
• 2
• 3

put/post

舊版

http為@angular/http下的Http
headers = new Headers({‘Content-type‘: ‘application/json‘});
http.put(url, JSON.stringify(body),{headers: headers}).map((response: Response) => {
    response.json.xxxxx進行引用
})

• 1
• 2
• 3
• 4
• 5

新版

http為@angular/common/http下的HttpClient
headers = new HttpHeaders({‘Content-type‘: ‘application/json‘});
http.put(url)put(url, JSON.stringify(body),{headers: headers}).pipe(map(item => {
  item[‘xxxxxx‘]引用
  }));
}

• 1
• 2
• 3
• 4
• 5
• 6

delete

舊版

http為@angular/http下的Http
http.delete(url).map(response: Response) => {
    response.json().xxxx進行引用
}

• 1
• 2
• 3
• 4

新版

http為@angular/common/http下的HttpClient
http.delete(url).pipe(map(item => item[‘xxxxxx‘]));
}

• 1
• 2
• 3

subscribe調用部分

對Observable值進行subscribe的使用：

Observable值
.subscribe(respose => {
  使用response進行引用
})

• 1
• 2
• 3
• 4

總結

這篇文章整理了一下關於Angular6中使用http和rxjs相關的一些基礎以及新舊的使用方式的一些差別，下篇文章開始使用rxjs6等進行一個Rest的CRUD操作。

再分享一下我老師大神的人工智能教程吧。零基礎！通俗易懂！風趣幽默！還帶黃段子！希望你也加入到我們人工智能的隊伍中來！https://blog.csdn.net/jiangjunshow

Angular 入門教程系列 34 Angular6下的Http模塊與Rxjs6