Angular 入门教程系列 34 Angular6下的Http模块与Rxjs6

Posted firsttry

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angular 入门教程系列 34 Angular6下的Http模块与Rxjs6相关的知识,希望对你有一定的参考价值。

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的主要内容,如果未能解决你的问题,请参考以下文章

Angular 5.x 系列教程笔记——快速入门

Angular 5.x 系列教程笔记——快速入门

连载小马过河 —— 给萌新的 Angular 系列教程(序)

Angular知识系列:入门

Angular 5.x 系列教程笔记——架构分析

Angular 5.x 系列教程笔记——架构分析