使用RxJS更优雅地进行定时请求详析

在用 Angular 做项目的时候，遇到了一个有点麻烦的问题。具体问题如下：

轮循请求某个接口，如何保证接口返回的数据与请求的顺序相同？

实际的业务场景是这样的：前端需要轮循请求后端接口获取文件处理进度，并在前端用进度条展示。如下方所示：

首先想到的肯定是使用 setTimeout 或者 setInterval 进行定时请求。然而结果有点诡异，进度条的变化不是递增，而是有快有慢，比如 30%，20%，50%，40%这样。仔细一想也知道问题出在哪，异步请求的结果并不是按顺序返回的。

我在之前的工作中还没有遇到过这类需求，所以我并不是很清楚如果用传统方式应该如何解决。然而很庆幸的是 RxJS 正好擅长处理这样的问题。我立即翻了一下文档，interval 操作符可以处理定时任务，而且更强大的是返回结果也是有顺序的。

interval(period: 0 = 0, scheduler: SchedulerLike = async): Observable<number>

首先看一下 interval 的说明：

创建一个可观察对象，在规定的调度程序中，以规定的时间间隔发出连续的数值。

interval 返回一个可观察对象，它可以周期性的发出递增数值，但是第一次发出值是在第一个周期结束之后执行的。

以下是官方例子：

import { interval } from 'rxjs';
import { take } from 'rxjs/operators';

const numbers = interval(1000);

const takeFourNumbers = numbers.pipe(take(4));

takeFourNumbers.subscribe(x => console.log('Next: ', x));

// Logs:
// Next: 0
// Next: 1
// Next: 2
// Next: 3

不过只看官方例子还是有点懵，如果是 http 请求的话应该怎么写参数呢？或者说应该把 http 请求写在哪里？

这个地方的坑有点深，通过翻阅外文资料终于找到答案。直接上代码。

// 间隔 1s 请求
this.timer$ = interval(1000)
  .pipe(
    // 取消过时的请求值
    switchMap(() => {
      return this.http.get(API);
    }),
  )
  .subscribe(
    (res: any) => {
      // 百分数处理逻辑
    },
    () => {
      this.timer$.unsubscribe();
    },
    () => {
      this.timer$.unsubscribe();
    },
  );

总的来说就是通过管道处理请求。最终的效果很完美。

总结

RxJS 确实是一个非常强大的工具库，尤其处理异步交互真的是省时省力，但是国内技术文章偏少，遇到疑难问题还需要查阅国外文章。欢迎大家评论交流。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 关于RxJS Subject的学习笔记

    Observer Pattern 观察者模式定义 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己. 我们可以使用日常生活中,期刊订阅的例子来形象地解释一下上面的概念.期刊订阅包含两个主要的角色:期刊出版方和订阅者,他们之间的关系如下: 期刊出版方 - 负责期刊的出版和发行工作 订阅者 - 只需执行订阅操作,新版的期刊发布后,就会主动收

  • 详解使用angular的HttpClient搭配rxjs

    详解使用angular的HttpClient搭配rxjs

    一.原Http使用总结 使用方法 1.在根模块或核心模块引入HttpModule 即在AppModule或CoreModule中引入HttpModule: import { HttpModule } from '@angular/http'; @NgModule({ import: [ HttpModule ] // ... }) AppModule {} 2.在使用的地方注入Http服务 import { Http } from '@angular/http'; // ... construc

  • Angular5升级RxJS到5.5.3报错：EmptyError: no elements in sequence的解决方法

    前言 RxJS是一种针对异步数据流编程工具,或者叫响应式扩展编程:可不管如何解释RxJS其目标就是异步编程,Angular引入RxJS为了就是让异步可控.更简单.可是最近在升级中遇到了一些问题,下面就来给大家介绍下,给同样遇到这个问题发朋友们一些参考,下面话不多说了,来一起看看详细的介绍吧. Angular 5.0.5升级RxJS到5.5.3报错: ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence Em

  • Angular搜索场景中使用rxjs的操作符处理思路

    在有input输入框的搜索/过滤业务中,总会考虑如何减少发起请求频率,尽量使每次的请求都是有效的.节流和防抖是比较常见的做法,这类函数的实现方式也不难,不过终归还是需要自己封装.rxjs提供了各种操作符 , 可以很快捷高效的实现这些功能. 栗子 现在有一个查询场景,可以通过城市.类型.关键字来多维度过滤结果,如下图: 处理思路: 1.通过ngModel将select和input的值绑定到模型中的过滤条件对象 2.监听select输入框的change事件和input输入框的input事件来触发 发

  • 如何用RxJS实现Redux Form

    如何用RxJS实现Redux Form

    写在前面的话 看这篇文章之前,你需要掌握的知识: React RxJS (至少需要知道 Subject 是什么) 背景 form 可以说是 web 开发中的最大的难题之一.跟普通的组件相比,form 具有以下几个特点: 1.更多的用户交互. 这意味着可能需要大量的自定义组件,比如 DataPicker,Upload,AutoComplete 等等. 3.频繁的状态改变. 每当用户输入一个值,都可能会对应用状态造成改变,从而需要更新表单元素或者显示错误信息. 3.表单校验,也就是对用户输入数据的有

  • angular.js4使用 RxJS 处理多个 Http 请求

    有时候进入某个页面时,我们需要从多个 API 地址获取数据然后进行显示.管理多个异步数据请求会比较困难,但我们可以借助 Angular Http 服务和 RxJS 库提供的功能来实现上述的功能.处理多个请求有多种方式,使用串行或并行的方式. 基础知识 mergeMap mergeMap 操作符用于从内部的 Observable 对象中获取值,然后返回给父级流对象. 合并 Observable 对象 const source = Rx.Observable.of('Hello'); //map t

  • 详细介绍RxJS在Angular中的应用

    RxJS是一种针对异步数据流编程工具,或者叫响应式扩展编程:可不管如何解释RxJS其目标就是异步编程,Angular引入RxJS为了就是让异步可控.更简单. 而今就是要探讨什么是Observable.observer.operator.Submit.EventEmmit,以及如何去使用它们. 什么是Observable? Observable只是一个普通函数,要想让他有所作为,就需要跟observer一起使用:前者是受后者是攻.而这个observer(后面我们会介绍)只是一个带有 next.er

  • 使用RxJS更优雅地进行定时请求详析

    使用RxJS更优雅地进行定时请求详析

    在用 Angular 做项目的时候,遇到了一个有点麻烦的问题.具体问题如下: 轮循请求某个接口,如何保证接口返回的数据与请求的顺序相同? 实际的业务场景是这样的:前端需要轮循请求后端接口获取文件处理进度,并在前端用进度条展示.如下方所示: 首先想到的肯定是使用 setTimeout 或者 setInterval 进行定时请求.然而结果有点诡异,进度条的变化不是递增,而是有快有慢,比如 30%,20%,50%,40%这样.仔细一想也知道问题出在哪,异步请求的结果并不是按顺序返回的. 我在之前的工作

  • Python中更优雅的日志记录方案详解

    目录 常见使用 loguru 安装 基本使用 详细使用 在 Python 中,一般情况下我们可能直接用自带的 logging 模块来记录日志,包括我之前的时候也是一样.在使用时我们需要配置一些 Handler.Formatter 来进行一些处理,比如把日志输出到不同的位置,或者设置一个不同的输出格式,或者设置日志分块和备份.但其实个人感觉 logging 用起来其实并不是那么好用,其实主要还是配置较为繁琐. 常见使用 首先看看 logging 常见的解决方案吧,我一般会配置输出到文件.控制台和

  • 在Vue3中如何更优雅的使用echart图表详解

    目录 前言 封装思路 引入模块 封装功能 使用例子 总结 前言 在大屏可视化项目中,我们常常需要用到很多的图表组件,通常你会编写很多的option对图表进行渲染,以及引入它们所需的一些组件并使用echart.use. 在Vue2中我们常常把可复用的组件单独抽离出来,再通过props.emit等方法向复用组件中传入组件所需数据,而在Vue3中我们可以将一些逻辑功能写成hook进行抽离和复用再传入到视图中,这会不仅让你的组件中的代码更加优雅而且阅读性更强. 封装思路 引入模块 我们先创建lib.ts

  • 如何在vue中更优雅的封装第三方组件详解

    如何在vue中更优雅的封装第三方组件详解

    目录 一.需求场景描述 二.关键技术点介绍 1.v-bind="$attrs" 2.v-on="$listeners" 三.封装el-image的代码示例 总结 一.需求场景描述 实际开发的时候,为了减少重复造轮子,提高工作效率,节省开发时间成本, 免不了会使用ui组件库,比如在web前端很受欢迎的element-ui. 但有的时候,我们需要在原组件的基础上做些改造,比如一个image组件, 我们需要统一在图片加载失败的时候展示的特定图,每次使用组件都加一遍, 麻烦

  • iOS在页面销毁时如何优雅的cancel网络请求详解

    前言 大家都知道,当一个网络请求发出去之后,如果不管不顾,有可能出现以下情况: 进入某个页面,做了某种操作(退出页面.切换某个tab等等)导致之前的请求变成无用请求,这时候有可能出现虽然页面已经销毁了,但是网络请求还在外面飞的情况,如果放任不管,那么这个请求既浪费流量,又浪费性能,尤其是在网络比较差时,一个超时的无用请求更让人不爽.这时候,我们最好的办法是cancel掉这些无用的请求. 传统的cancel方式是这样的: 1.在类里面需要持有请求对象 @property (strong/weak,

  • 如何利用Promises编写更优雅的JavaScript代码

    你可能已经无意中听说过 Promises,很多人都在讨论它,使用它,但你不知道为什么它们如此特别.难道你不能使用回调么?有什么了特别的?在本文中,我们一起来看看 Promises 是什么以及如何使用它们写出更优雅的 JavaScript 代码. Promises 易于阅读 比如说我们想从 HipsterJesus 的API中抓取一些数据并将这些数据添加到我们的页面中.这些 API 的响应数据形式如下: { "text": "<p>Lorem ipsum...<

  • 更优雅的微信小程序骨架屏实现详解

    更优雅的微信小程序骨架屏实现详解

    一.演示 二.说明: 实现思路:需要默认数据,这样才能完美应对list,wx:if的情况,及flex宽度靠内容撑开的样式. 替换思路:和imageLoader加载器类似:先展示默认图片,拿到数据之后显示真实的图片 具体实现: 页面准备一份默认数据:defaultData xml中:<skeleton watchData={{与卡槽笨蛋一样的对象}}><slot/></skeleton> 页面onload时,data=defaultData 此时:watchData第一次

  • Laravel 重写日志，让日志更优雅

    Laravel 重写日志，让日志更优雅

    更改目的: 重写了日志格式 加入trace,一次请求的唯一标识 加入error级别信息推送,事例中使用企业微信群助手 让我们可以更及时.更优雅.更方便追踪日志信息 有助于初学者了解Laravel框架 1.将文件 AppTool.php.Logger.php.LogServiceProvider.php复制到 app/Providers文件夹下,将文件BaseCommand.php复制到App\Console下 2 .在config/app.php→providers中加入 'providers'

  • web开发中如何优雅的解决"重复请求"问题

    web开发中如何优雅的解决"重复请求"问题

    目录 前言 提出问题 解决思路 axios 如何取消请求 封装axios 准备工作 开始封装 总结 前言 在我们web开发过程中,很多地方需要我们取消重复的请求.但是哪种场合需要我们取消呢?我们如何取消呢?带着这些问题我们阅读本文. 阅读完本文,你将了解以下内容: 需要取消重复请求的场景 我们如何取消重复请求 axios如何取消重复的请求 封装axios 如何给开源的项目提供源码 如何在本地调试npm包 提出问题 最近做的项目中,用的用户经常遇到这样的问题: 用户频繁切换筛选条件去请求数据,初次

  • Python使用CMD模块更优雅的运行脚本

    本文实例讲述了Python使用CMD模块更优雅的运行脚本的方法.分享给大家供大家参考.具体分析如下: 平时由于经常给测试人员调试一些东西,虽然写了一些脚本,感觉还是不方便. python的cmd模块提供的更优雅的方式,很喜欢. 刚写了一些平时常用的测试代码: # -*- coding:utf-8 -*- import os, sys from datetime import datetime import cmd import warnings from django.conf import s

随机推荐