Angular 入門教程系列 34 Angular6下的Http模塊與Rxjs6
阿新 • • 發佈:2019-01-20
系列 .get interval coff pcl UNC schedule span sch
Angular6的升級,略有影響的地方應該主要集中在Rxjs6,而至於http,在Angular4.3之後就發生了變化,如果沒有欠債的話,升級應該很簡單。即使有欠債的話,修改的內容也不多。
rxjs的變換
rxjs6主要在包的結構/pipe的使用方式/API的重命名這幾點與舊版本的使用方式不相容的變更,所以導致在實際使用中,有如下的變化
import的方式
import類型 | 舊版方式 | 新版方式(rxjs6) |
---|---|---|
Observable | import { Observable } from ‘rxjs/observable’ | import { Observable } from ‘rxjs’ |
map | import ‘rxjs/add/operator/map’ | import { map } from ‘rxjs/operator’ |
fromPromise | import ‘rxjs/add/observable/fromPromise’ | import { fromPromise } from ‘rxjs’ |
常見的一些導入方式:
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 重命名
舊版 | 新版(rxjs6) |
---|---|
do() | tap() |
catch() | catchError() |
switch() | switchAll() |
finally() | finalize() |
throw() | throwError() |
整體來說,這次變更使得包的結構更為清晰,缺省利用rxjs進行引用,operator全部集中到rxjs/operator下進行管理
http調用部分
angular的調用可以簡單分為使用Http提供的服務取得Observable的返回值,根據Observable的返回值進行subscribe操作兩段,這裏也簡單地整理一下兩種方式下的使用方法的不同
舊版 | 新版(4.3之後) |
---|---|
Http | HttpClient |
Response | HttpResponse |
Request | HttpRequest |
Headers | HttpHeaders |
首先在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