升级到Angular6后对老版本的RXJS代码做相应的调整

简介: 还没有了解过RXJS6的童鞋,可以查看我的另外一篇博文,此篇博文主要是对于RXJS5升级到RXJS6的代码调整示例RXJS5版本在RXJS5上我们是这样写请求的import 'rxjs/add/observable/of';import 'rxjs/add/observable/thr...

还没有了解过RXJS6的童鞋,可以查看我的另外一篇博文,此篇博文主要是对于RXJS5升级到RXJS6的代码调整示例

RXJS5版本

在RXJS5上我们是这样写请求的

import 'rxjs/add/observable/of';
import 'rxjs/add/observable/throw';
import 'rxjs/add/observable/map';
import 'rxjs/add/observable/mergemap';
this.http
    .get<{id: number; userId: number; title: string; body: string}[]>(
        'http://...........'
    )
    .map(data => {
            return ......;
    })
    .catch(error => {
        .....
    })
    .subscrible(...)

RXJS6对应修改为:

import {HttpClient} from '@angular/common/http';
import {Observable, of, throeError} from 'rxjs';
import {map, catchError} from 'rxjs';

 

this.http
    .get<{id: number; userId: number; title: string; body: string}[]>(
        'http://...........'
    )
    .pipe(
        map(data => {
            return ......;
        }),
        catchError(error => {
            return throwError('.....');
        })
    )
    .subscrible(...)

 

作者:承蒙时光
出处:http://www.cnblogs.com/timetimetime/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

相关文章
|
9天前
|
测试技术 UED 开发者
“Angular高手必看:模块化与依赖注入的绝妙搭配,让你的代码瞬间高大上!”
【10月更文挑战第25天】本文以问答形式详细探讨了Angular框架中的模块化与依赖注入的高级特性。主要内容包括:Angular模块的基本概念和创建方法,依赖注入的实现方式,模块间依赖关系的处理,以及懒加载模块的使用。通过这些特性,可以提高代码的可维护性和复用性,优化大型Web应用的开发和性能。
16 2
|
14天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
6月前
|
JavaScript 前端开发 架构师
Angular进阶:理解RxJS在Angular应用中的高效运用
RxJS(Reactive Extensions for JavaScript)是JavaScript的一个响应式编程库,特别适用于处理异步数据流。
81 0
|
3月前
|
开发者 开发工具 UED
JSF应用的社交革命:一键解锁社交媒体超级功能,引爆用户参与度的奇迹!
【8月更文挑战第31天】本文探讨了在JavaServer Faces (JSF)应用中集成社交媒体功能的最佳实践,包括选择合适的API和SDK、示例代码及实现细节。通过集成社交媒体,应用能提供即时内容分享、互动交流和个性化体验,提升用户参与度。文章还强调了用户体验优化、安全性及隐私保护的重要性,并总结了社交媒体集成对企业竞争优势的意义。
41 0
|
前端开发 JavaScript API
Angular与Rxjs学习
Angular与Rxjs学习
152 0
Angular与Rxjs学习
|
前端开发
Angular7 关于Bootstrap4.x.x版本无法使用Glyphicons 字体图标 简单解决方案
Angular7 关于Bootstrap4.x.x版本无法使用Glyphicons 字体图标 简单解决方案
108 0
Angular7 关于Bootstrap4.x.x版本无法使用Glyphicons 字体图标 简单解决方案
Angular 结合 rxjs 实现拖拽
在上两篇文章中,我们学习了元素中必知重要属性和方法和 Angular 中自定义 Video 操作,没有度过的读者可先了解。那么,现在有这么一个需求,你会怎么实现呢?
Angular 结合 rxjs 实现拖拽
|
jenkins 持续交付 开发工具
Jenkins 结合 Angular 展示构建版本
刚好最近在巩固相关的知识内容,以 angular 为主,那么咱就来参与下活动,希望能够坚持下去,顺便拿点小奖励。
Jenkins 结合 Angular 展示构建版本
|
存储 JavaScript 前端开发
Angular 结合 Git Commit 版本处理
我们接下来用 Angular 实现下效果,React 和 Vue 同理。
Angular 结合 Git Commit 版本处理
|
API 索引
理解Angular RxJS映射数据操作
Map 数据是程序开发时的一种常见操作。当在代码中使用RxJS来生成数据流时,很可能最终需要一种方法来将数据映射成需要的任何格式。RxJS提供了常规的 map 函数,还有 mergeMap、switchMap和concatMap这样的函数,它们的处理方式略有不同。
155 0