ajax和rxjs,javascript – RxJS 5 Observable和Angular2 http：调用ajax一次,保存结果,随后的ajax调用使用缓存结果...
下面的代码是我目前拥有的简化版本：
name.service.ts@Injectable()
export class NameService {
const nameURL = "http://www.example.com/name";
getName() {
return this.http.get(nameURL);
}
}
name1.component.ts@Component({
templateUrl: './name1.component.html',
styleUrls: ['./name1.component.css']
})
export class Name1Component implmenets OnInit {
private name1;
constructor(
private nameService: NameService
){}
ngOnInit() {
this.setupName();
}
private setupName() {
this.nameService.getName()
.subscribe(
resp => this.name1 = resp,
error => this.name1 = "unknown"
);
}
}
name2.component.ts@Component({
templateUrl: './name2.component.html',
styleUrls: ['./name2.component.css']
})
export class Name2Component implmenets OnInit {
private name2;
constructor(
private nameService: NameService
){}
ngOnInit() {
this.setupName();
}
private setupName() {
this.nameService.getName()
.subscribe(
resp => this.name2 = resp,
error => this.name2 = "unknown"
);
}
}
这是我想要做的,name1.component.ts将首先调用NameService类的getName方法.然后getName将进行ajax调用并返回一个observable.
接下来,name2.component.ts也将调用NameService类的相同getName方法,getName也将执行相同的ajax调用并返回一个observable.
是否可以使用rxjs,当NameService中的getName方法进行第一次ajax调用时,它会存储ajax调用的结果.对getName方法的任何后续函数调用将返回第一个ajax调用的缓存结果,而不执行另一个冗余的ajax.
最佳答案 您可以多次订阅Observable,因此,如果您只想保存第二个网络请求以便在两个组件之间共享数据,您可以将其缓存在您的服务中,如下所示：@Injectable()
export class NameService {
const nameURL = "http://www.example.com/name";
private cache: Observable;
getName() {
return this.cache || this.cache = this.http.get(nameURL);
}
}
ajax和rxjs,javascript – RxJS 5 Observable和Angular2 http：调用ajax一次,保存结果,随后的ajax调用使用缓存结果...相关推荐
- RxJS 系列之二 - Observable 详解
查看新版教程,请访问前端修仙之路 RxJS 系列目录 RxJS 系列之一 - Functional Programming 简介 RxJS 系列之二 - Observable 详解 (本文) RxJS ...
- rxjs angular_Angular RxJS深度
rxjs angular In this tutorial, we'll learn to use the RxJS 6 library with Angular 6 or Angular 7. We ...
- ajax实现给JavaScript中全局变量赋值（转）
原文地址:ajax实现给JavaScript中全局变量赋值 问题简化: <script type="text/javascript"> var a=1 ; functi ...
- AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）
Ajax技术出现的意义: 向服务器请求额外的数据而无序卸载页面,带来更好的用户体验,页面无刷新技术. 1.Ajax的核心是XMLHttpRequest对象(简称XHR),创建XHR对象 如下兼容处理, ...
- AJAX（Asynchronous JavaScript And XML）
AJAX(Asynchronous JavaScript And XML):异步的javascript和xml技术 作用:在不刷新整个页面的情况下,通过XMLHttpRequest向后台偷偷发起请求, ...
- python提取ajax异步加载数据_python爬取豆瓣电影分类排行榜引出的异步加载（AJAX）问题...
1.背景 之前的文章中已经介绍过猫眼TOP100的电影信息爬取案例,网页每页有10条电影信息,通过翻页发现URL变化规律构造循环爬取10页100条全部电影信息.但是豆瓣电影分类排行榜的网页情况就所不同 ...
- 30 天精通 RxJS (05)： 建立 Observable(一)
Observable 是 RxJS 的核心,今天让我们从如何建立 Observable 开始! 这是[30天精通 RxJS]的 05 篇,如果还没看过 04 篇可以往这边走: [30 天精通 RxJS ...
- Angular RxJS入门笔记 （Observable可观察对象、Subscribe订阅、Observer观察者、Subscription对象）
RxJS入门笔记,关于Observable可观察对象.Observer观察者.Subscribe订阅,Subscription Observable可观察对象 Observer观察者 总结整体 本笔记 ...
- 在Angular里使用rxjs的异步API - Observable
在Angular的service类里,导入Observable和of: of(HEROES) returns an Observable<Hero[]> that emits a sing ...
最新文章
- Linux网络相关、firewalld、netfilter及其5表5链、iptables语法
- how SAP OData supported option in odata eq ne lt gt?
- linux sd卡 u盘区别,linux下实现U盘和sd卡的自动挂载
- [vue] 说说你对vue的表单修饰符.lazy的理解
- C++局部变量和全局变量的初始化
- java随机数函数生成指定区间的，意外的惊喜
- 通信基础 7 —— 遍历保密速率、谱分解物理意义
- javascript 3/13
- 1: 上山拜师--ARM简介
- 往事如烟 - 归去来
- Python Learn 2 -- 高级特性、函数式编程
- oracle autovue是什么软件,AutoVue
- 弘辽科技：淘宝直通车点击量是什么意思？直通车点击量怎么提升？
- 用计算机怎么管理小米路由器,小米路由器3做二级路由器怎么设置？小米路由器3设置详细教程...
- 纳秒脉冲等离子体放电
- 曹大带我学 Go（3）—— 如何用汇编打同事的脸
- html中diy的背景怎么透明,自制复古几何无缝纹案背景_html/css_WEB-ITnose
- 【专题5: 硬件设计】 之 【9.案例一：门控开关，制作BOM表和成本核算】
- 添加完商品后，点货品显示此商品不存在规格，请为其添加规格？
- 干货！小样本分子性质预测新方法——性质感知的关系网络