首页
学习
活动
专区
圈层
工具
发布

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.5K40

2022社招react面试题 附答案

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

2.4K10
  • Top JavaScript Frameworks & Topics to Learn in 2017

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

    2.6K00

    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 请求的结果会因为后续的修改而变得无效,那就取消它。

    6.1K20

    RxJS 函数式与响应式编程

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

    1.1K20

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

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

    1.2K10

    响应式编程在前端领域的应用

    HTTP 请求与重试基于响应式编程,我们可以很简单地实现一个请求的获取和自动重试:import { ajax } from "rxjs/ajax";import { map, retry, catchError...} from "rxjs/operators";const apiData = ajax("/api/data").pipe( // 可以在 catchError 之前使用 retry 操作符。...一个比较显著的区别在于,由于响应式编程是面向数据流和变化传播的模式,意味着我们可以对数据流进行配置处理,使其在把事件传给事件处理器之前先进行转换。...例如,如果我们想要在拉群后,自动同步之前的聊天记录,通过冷观察就可以做到。同样的,热观察的用途也很广泛。合流流的处理大概是响应式编程中最有意思的部分了。...但在一些复杂应用的场景,合理地使用响应式编程,可以有效地降低各个模块间的依赖,更加容易地进行整体数据流动管理和维护。这么有意思的东西,你要不要来试试看?

    66980

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

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

    2.4K60

    RxJS 快速入门

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

    2.1K20

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

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

    1.3K20

    深入浅出 RxJS 之 创建数据流

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

    2.5K10

    构建流式应用:RxJS 详解

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

    7.8K31

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

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

    3.4K20

    如何处理变慢的API?

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

    1.8K70

    调试 RxJS 第1部分: 工具篇

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

    1.5K40

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

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

    2K20

    关于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、由于源码的局限性,重复监听与删除监听必须同步进行。

    93820

    干货 | 浅谈React数据流管理

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

    2.2K20

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

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

    1.8K10
    领券