首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

RxJS:有条件地重复AJAX并响应之前的结果

RxJS是一个响应式编程库,它提供了一种方便的方式来处理异步数据流。它基于观察者模式,可以帮助开发人员更好地处理数据流和事件。

RxJS的核心概念是Observable(可观察对象),它代表了一个异步数据流。通过使用Observable,我们可以对数据流进行各种操作,例如过滤、映射、合并等。这使得我们能够以一种声明式的方式来处理数据流,简化了异步编程的复杂性。

在RxJS中,有一个操作符叫做repeatWhen,它可以用于有条件地重复AJAX请求并响应之前的结果。repeatWhen操作符接受一个函数作为参数,该函数返回一个Observable。当这个Observable发出一个值时,repeatWhen会重新订阅源Observable,从而触发重复请求。

下面是一个示例代码,演示了如何使用repeatWhen操作符来有条件地重复AJAX请求并响应之前的结果:

代码语言:txt
复制
import { interval, of } from 'rxjs';
import { mergeMap, repeatWhen, delay } from 'rxjs/operators';

// 模拟一个AJAX请求
function ajaxRequest() {
  return of('Response').pipe(delay(1000));
}

// 重复请求的条件函数
function repeatCondition(response) {
  // 根据响应结果判断是否需要重复请求
  return response !== 'Success';
}

// 创建一个Observable,每秒发出一个值
const source$ = interval(1000);

// 对源Observable进行操作,使用mergeMap进行AJAX请求,并使用repeatWhen进行重复请求
const result$ = source$.pipe(
  mergeMap(() => ajaxRequest()),
  repeatWhen((notifications) => notifications.pipe(
    mergeMap((response) => repeatCondition(response) ? of(response) : interval(5000))
  ))
);

// 订阅结果Observable,输出响应结果
result$.subscribe((response) => {
  console.log(response);
});

在上面的示例中,我们使用interval创建了一个每秒发出一个值的Observable。然后,我们使用mergeMap操作符将每个值映射为一个AJAX请求,并使用repeatWhen操作符进行重复请求。在repeatWhen的参数函数中,我们使用mergeMap操作符根据响应结果判断是否需要重复请求,如果需要重复请求,则使用interval创建一个每5秒发出一个值的Observable。

这样,当AJAX请求的响应结果不是"Success"时,repeatWhen会重新订阅源Observable,从而触发重复请求。如果响应结果是"Success",则不会重复请求。

推荐的腾讯云相关产品:腾讯云函数(Serverless Cloud Function),它是腾讯云提供的无服务器计算服务,可以帮助开发人员更轻松地构建和部署云函数。腾讯云函数可以与RxJS结合使用,实现有条件地重复AJAX请求并响应之前的结果。您可以通过以下链接了解更多关于腾讯云函数的信息:腾讯云函数产品介绍

请注意,以上答案仅供参考,具体的实现方式可能因应用场景和需求而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Rxjs 响应式编程-第一章:响应

然后我们将创建一个Observable,看看响应式思维和RxJS是怎么样改善现有技术,让你成为更快乐,更多高效程序员。 什么是响应式? 让我们从一个小响应RxJS程序开始。...这个程序需要通过单击按钮检索来自不同来源数据,它具有以下要求: 它必须统一来自使用不同源JSON结构 最终结果不应包含任何副本 为了避免多次请求数据,用户不能重复点击按钮 使用RxJS,我们代码类似这样...实际上,我们程序本质上是一个由按钮单击事件构成Observable,我们把它转变成获得我们想要结果响应式编程具有很强表现力,举个例子来说,限制鼠标重复点击例子。...如果HTTP GET请求成功,我们emit它内容结束序列(我们Observable只会发出一个结果)。 否则,我们会emit一个错误。在最后一行,我们传入一个url进行调用。...总结 在本章中,我们探讨了响应式编程,了解了RxJS如何通过Observable解决其他问题方法,例如callback或promise。

2.2K40

2022社招react面试题 附答案

总结: componentWillMount:在渲染之前执行,用于根组件中 App 级配置; componentDidMount:在第一次渲染之后执行,可以在这里做AJAX请求,DOM操作或状态更新以及设置事件监听器...确定要更新组件之前之前执行; componentDidUpdate:它主要用于更新DOM以响应props或state更改; componentWillUnmount:它用于取消任何网络请求,或删除与组件关联所有事件监听器...这样做主要原因是受控组件支持即时字段验证,允许有条件禁用/启用按钮,强制输入格式。 7、如何避免组件重新渲染? React中最常见问题之一是组件不必要地重新渲染。...redux-thunk缺陷: 样板代码过多:与redux本身⼀样,通常⼀个请求需要⼤量代码,⽽且很多都是重复性质; 耦合严重:异步操作与reduxaction偶合在⼀起,不⽅便管理; 功能孱弱:有...redux-observable优点: 功能最强:由于背靠rxjs这个强⼤响应式编程库,借助rxjs操作符,你可以⼏乎做任何你能想到异步处理; 背靠rxjs:由于有rxjs加持,如果你已经学习了

2.1K10

Top JavaScript Frameworks & Topics to Learn in 2017

Closures (闭包): 了解函数作用域一些特征. Callbacks(回调): 回调是当另一个函数用于在有结果就绪时准备执行函数。 就像你说,“做你工作,做完后给我打电话。...& server API calls (Ajax和服务器API调用): 那些最好玩应用程序最终需要与网络通信。...它基于单向数据流想法,这意味着对于每个更新周期: React 接受组件输入作为 props,并有条件渲染 DOM 更新,如果数据已经改变了 DOM 特定部分。...你可以监听这些事件更新响应数据。 使用对数据任何更改,该过程在步骤1中重复。...因为它会给你很多实践,教你使用纯函数价值,教你如何将通用函数 reducers,用于迭代数据集合并从中提取一些值。

2.2K00

Angular快速学习笔记(4) -- Observable与RxJS

订阅者函数用于定义“如何获取或生成那些要发布值或消息”。 要执行所创建可观察对象,开始从中接收通知,你就要调用它 subscribe() 方法,传入一个观察者(observer)。...库 RxJS响应式扩展 JavaScript 版)是一个使用可观察对象进行响应式编程库,它让组合异步代码和基于回调代码变得更简单,RxJS 提供了一种对 Observable 类型实现.。...可以使用retry重试失败操作 import { ajax } from 'rxjs/ajax'; import { map, retry, catchError } from 'rxjs/operators...HTTP 模块使用可观察对象来处理 AJAX 请求和响应 路由器和表单模块使用可观察对象来监听对用户输入事件响应 事件发送器 EventEmitter Angular 提供了一个 EventEmitter...如果已发出 AJAX 请求结果会因为后续修改而变得无效,那就取消它。

5K20

RxJS 函数式与响应式编程

也就是说,每一步都是单纯运算,而且都有返回值。 纯函数 纯函数特点: 给定相同输入参数,总是返回相同结果。 没有依赖外部变量值。 没有产生任何副作用。...函数式编程强调函数不能有副作用,也就是函数要保持纯粹,只执行相关运算返回值,没有其他额外行为。...函数式编程优势 代码简洁,开发快速 函数式编程大量使用函数,减少了代码重复,因此程序比较短,开发速度较快。 接近自然语言,易于理解,可读性高 函数式编程自由度很高,可以写出很接近自然语言代码。...比如 DOM 事件、AJAX、WebSocket、定时器等。通常情况下,异步场景会比较复杂。不过值得庆幸是,我们拥有 RxJS 这个利器。...参考资源 响应式编程入门 深入浅出 RxJS

1K20

深入浅出 RxJS 之 函数响应式编程

“变”,赋值时是什么值,就会一直保持这些值,代码是一个一个函数,每个函数只是对输入参数做了响应,然后返回结果。...RxJS 引用了两个重要编程思想: 函数式 响应式 # 函数式编程 # 什么是函数式编程 强调使用函数来解决问题一种编程方式。...,因为函数本身就是一个对象,可以被赋值给一个变量,可以作为参数传递,由此可以很方便应用函数式编程许多思想。...# RxJS 是否是函数响应式编程 FRP 包含两个重要元素: 指称性(denotative) 临时连续性(temporally continuous) 正统 FRP 认为,一个系统如果能被称为 FRP...# 函数响应式编程优势 RxJS 模型特点: 数据流抽象了很多现实问题 网页 DOM 事件,可以看作为数据流 通过 WebSocket 获得服务器端推送消息可以看作是数据流 通过 AJAX 获得服务器端数据资源也可以看作是数据流

1.1K10

流动数据——使用 RxJS 构造复杂单页应用数据逻辑

离散数据会让我们需要使用缓存。比如说,界面建立起来之后,如果有人在其他端创建了任务,那么,本地看板只需收到这条任务信息创建视图,并不需要再去查询人员、标签等关联信息,因为之前已经获取过。...但是,我们需要注意到,WebSocket编程方式跟AJAX是不一样,WebSocket是一种订阅,跟主流程很难整合起来,而AJAX相对来说,可以组织得包含在主流程中。...注意,这里面data1,data2,data3,可能都是之前提到过,包含了同步和异步封装一个过程,具体来说,就是一个RxJS Observable。...在这些体系中,如果要使用RxJSObservable,都非常简单: data$.subscribe(data => { // 这里根据所使用视图库,用不同方式响应数据 // 如果是 React...使用是非常方便,形如:let todo of todos$ | async这种代码,可以直接绑定一个Observable到视图上,会自动订阅和销毁,比较简便优雅解决了“等待数据”,“数据结果不为空

2.2K60

浅谈前端响应式设计(二)

上一篇文章提到了几种响应方案,以及它们缺点。本文将介绍 Observable以及它一个实现,以及它在处理响应式时相对于上篇博客中方案巨大优势(推荐两篇博客对比阅读)。...  单个值 多个值 同步 T、null Iterator 异步 Promise Observable 使用 Rxjs 上文提到使用 EventEmitter做响应式处理,在...在讨论面向对象响应响应式中,我们提到对于异步问题,面向对象方式不好处理。...但是我们希望在路由被且走后,后台数据依然会继续。 对于事件而言,在事件发生之后订阅者不会受到订阅之前逻辑。...Redux事件(Action)其实是一个事件流,那么我们就可以很自然把 Redux事件流融入到 Rxjs流中: () => next => { const action$ = new Subject

1K20

RxJS 快速入门

实际上,这是一种编程范式,叫做函数响应式编程(FRP)。它比 Promise 可年轻多了,直到 1997 年才被人提出来。 顾名思义,FRP 同时具有函数式编程和响应式编程特点。响应式编程是什么呢?...形象说,它工作模式就是“饭来张口,衣来伸手”,也就是说,等待外界输入,做出响应。流水线每个工位上工人正是这种工作模式。 工业上,流水线是人类管理经验结晶,它所做事情是什么呢?...因此,响应式和函数式几乎是注定要在一起。...它有两个数字型参数,第一个是首次等待时间,第二个是重复间隔时间。从图上可以看出,它实际上是个无尽流 —— 没有终止线。因此它会按照预定规则往流中不断重复发出数据。...而当你用过 Rx 大家族中任何一个成员时,RxJS 对你几乎是免费,反之也一样。 唯一问题,就是找机会实践,体会 FRP 风格独特之处,获得那些超乎具体技术之上真知灼见。 ----

1.8K20

深入浅出 RxJS 之 创建数据流

from 从 Promise 对象产生数据流 fromPromise 从外部事件对象产生数据流 fromEvent 和 fromEventPattern 从 Ajax 请求结果产生数据流 ajax 延迟产生数据流...对于应用开发工程师,应该尽量使用创建类操作符,避免直接利用 Observable 构造函数来创造 Observable 对象,RxJS 提供创建类操作符覆盖了几乎所有的数据流创建模式,没有必要重复发明轮子...# repeat:重复数据数据流 repeat 功能是可以重复上游 Observable 中数据若干次。...值得注意是,repeat 只有在上游 Observable 对象完结之后才会重新订阅,因为在完结之前,repeat 也不知道会不会有新数据从上游被推送下来。...# defer 数据源头 Observable 需要占用资源,像 fromEvent 和 ajax 这样操作符,还需要外部资源,所以在 RxJS 中,有时候创建一个 Observable 代价不小

2.3K10

构建流式应用:RxJS 详解

:监听文本框输入事件,将输入内容发送到后台,最终将后台返回数据进行处理展示成搜索结果。...url: `search.qq.com/${searchText}`, success: data => { // 拿到后台返回数据,展示搜索结果...结果后台返回了“爱迪生”搜索结果,执行渲染逻辑后结果框展示了“爱迪生”结果,而不是当前正在搜索“达尔文”,这是不正确。...学习 RxJS,我们需要从可观测数据流(Streams)说起,它是 Rx 中一个重要数据类型。 流是在时间流逝过程中产生一系列事件。它具有时间与事件响应概念。...提供了优雅处理方式,可以在事件源(Observable)与响应者(Observer)之间增加操作流方法。

7.3K31

社招前端一面react面试题汇总

(注:这里之所以多次 +1 最终只有一次生效,是因为在同一个方法中多次 setState 合并动作不是单纯将更新累加。比如这里对于相同属性设置,React 只会为其保留最后一次更新)。...因此在这些阶段发岀Ajax请求显然不是最好选择。在组件尚未挂载之前Ajax请求将无法执行完毕,如果此时发出请求,将意味着在组件挂载之前更新状态(如执行 setState),这通常是不起作用。...当然可以通过 setState 第二个参数中 callback 拿到更新后结果setState 批量更新优化也是建立在异步(合成事件、钩子函数)之上,在原生事件和 setTimeout 中不会批量更新...redux-thunk缺陷:样板代码过多:与redux本身⼀样,通常⼀个请求需要⼤量代码,⽽且很多都是重复性质;耦合严重:异步操作与reduxaction偶合在⼀起,不⽅便管理;功能孱弱:有⼀些实际开发中常...redux-observable优点:功能最强:由于背靠rxjs这个强⼤响应式编程库,借助rxjs操作符,你可以⼏乎做任何你能想到异步处理;背靠rxjs:由于有rxjs加持,如果你已经学习了rxjs

3K20

如何处理变慢API?

所以你维护“全局”状态越少越好。它不仅有助于保持代码简单和模块化,而且还为您提供更多自由去提高并发性。 在这种情况下,一种更好方法是,不要处理来自慢速API响应,而是简单停止接收来自它响应。...只需终止那些您不再关心响应和继续运行API。您可以通过跟踪所有正在进行API调用来轻松执行此操作,并且当您需要启动新API调用时,只需终止不再需要先前调用即可。...如果您使用是jQuery ajax方法,那么请保留对jQuery ajax方法返回XMLHttpRequest引用,并在适当时候调用您流中中止方法。...在这种情况下,您可以简单在您可观察对象上使用一个switch 结构,获得您感兴趣最新异步事件,而不必担心任何状态维护或终止先前正在进行API。...作为共享服务构造函数一部分创建RxJS主体实例asyncActionSubject,使用switch结构来简单切换到返回最新observable。 其余都由RxJS框架负责。

1.7K70

调试 RxJS 第1部分: 工具篇

之前做法是在整个代码库中穿插大量 do 操作符和日志来检查流经组合 observables 值。...中间时,应该避免有条件日志输出太恐怖 即使是专门日志操作符,其体验也不理想 最近,我花费了一些时间开发了一个 RxJS 调试工具。...大多数时候,我都是在应用启动代码中早早调用模块 API spy 方法,然后使用控制台 API 来执行剩下调试工作。...调用 rxSpy.show() 会显示所有标记过 observables 列表,表明它们状态 (未完成、已完成或报错)、订阅者数量以及最新发出值 (如果有值发出的话)。...调用 rxSpy.pause 会暂停标记 observable 返回一个用于控制和检查 observable 通知 deck 对象: ?

1.3K40

从Lisp到Vue、React再到 Qwit:响应式编程发展历程

Flex 没有区分更新属性和更新 UI,导致大量 UI 抖动(渲染中间值)。 事后看来,我可以看到哪些架构决策导致了这种次优结果,但当时我并不清楚,我对响应式系统有点不信任。...如果你希望在未经过编译文件中获得响应性,则Svelte提供了一个存储API,它缺少已编译响应性所具有的魔力,并需要更明确注册使用subscribe和unsubscribe。...一种统一方法会更受欢迎。 RxJS RxJS 是一个不依赖于任何底层渲染系统响应式库。这似乎是一个优势,但它也有一个缺点。导航到新页面需要拆除现有的 UI 构建新 UI。...这些框架使用虚拟DOM(Virtual DOM)技术来跟踪数据变化,更新界面。文章还讨论了响应式编程优点和缺点,如可读性和性能等。最后,文章预测了未来响应式编程发展方向。...总的来说,本文很好介绍了响应式编程历史和发展,深入浅出讲述了它优点和缺点。文章提到了很多实际应用和框架例子,让读者更好地理解响应式编程概念和实践。

1.6K20

干货 | 浅谈React数据流管理

三、mobx 最开始接触mobx也是因为redux作者DanAbramov那句:Unhappywith redux?try mobx,我相信很多人也是因为这句话而开始了解学习使用它。...SCU优化,减少重复render;而mobx都是SmartComponent,不用我们手动做SCU; mobx设计思想: ?...在开始介绍rxjs之前,我们先来简单聊聊什么是响应式编程?我以一个很简单小例子来看:a + b = c。...回到我们rxjs上,rxjs是如何做到响应呢?多亏了它两种强大设计模式:观察者模式和迭代器模式;简单介绍一下: 1)观察者模式: ?...通过订阅形式,也就是subscribe方法(这也类似于reduxstore.subscribe),而在订阅之前,他们两者是毫无关联,无论Observable发出多少事件,Observer也不会做出任何响应

1.9K20

关于RxJS 自定义封装Rxbus使用规范文档

相关RX文章请看: SNS项目笔记--深入探究RXjs SNS项目笔记--RXjs简要用法 1、封装provider代码: import { Injectable } from...() { // 实例,不同类型和不同tag或者flag进行判断获取响应监听结果 this.rxbus.getListener().subscribe(data => { if...this.isInner) { this.rxbus.compelete() } } 2.3、声明isInner为true情况: 主要是在push页面之前,即进入子页面:...3.2、必须用不同对象或者不同tag以及value来区分所对应监听,不然会出现重复监听情况。 3.3、必须在子页面(除了首页)删掉对应监听,不然绝对会出现重复监听情况。...3.4、由于源码局限性,重复监听与删除监听必须同步进行。

83720

百度前端必会react面试题汇总

更重要是,你不能保证在组件挂载之前 Ajax 请求已经完成,如果是这样,也就意味着你将尝试在一个未挂载组件上调用 setState,这将不起作用。...ajax crawlable,例如 #!...当然可以通过 setState 第二个参数中 callback 拿到更新后结果setState 批量更新优化也是建立在异步(合成事件、钩子函数)之上,在原生事件和 setTimeout 中不会批量更新...:负责单一页面渲染2、多重职责:负责多重职责,获取数据,复用逻辑,页面渲染等3、明确接受参数:必选,非必选,参数尽量设置以_开头,避免变量重复4、可扩展:需求变动能够及时调整,不影响之前代码5、代码逻辑清晰...redux-observable优点:功能最强:由于背靠rxjs这个强⼤响应式编程库,借助rxjs操作符,你可以⼏乎做任何你能想到异步处理;背靠rxjs:由于有rxjs加持,如果你已经学习了rxjs

1.6K10

Angular vs React 最全面深入对比

虽然Angular是第一个积极采用TypeScript主要框架,但它也可以与React一起使用。 RxJS RxJS是一个响应式编程库,可以灵活地处理异步操作和事件。...它是将Observer和Iterator模式与功能编程相结合组合。RxJS允许您将任何东西视为连续流,对其进行各种操作,例如映射,过滤,拆分或合并。...使用它,您可以轻松设置和构建移动应用程序。 如果您喜欢使用混合应用程序,那么这是一个不错选择。...新概念数量绝对令新来者感到困惑。又是碰到一些问题还不得不Google后才能找到答案,但是,就像之前,是否合适,还是取决于更多因素。...如果对结果感到满意,可以继续全面构建。如果没有,会给你充分时间重新选择。

3.8K70
领券