交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 使用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 确实是一个非常强大的工具库,尤其处理异步交互真的是省时省力,但是国内技术文章偏少,遇到疑难问题还需要查阅国外文章。欢迎大家评论交流。

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

    您可能感兴趣的文章:

    • jQuery图片切换插件jquery.cycle.js使用示例
    • RxJS的入门指引和初步应用
    • 如何用RxJS实现Redux Form
    • 关于RxJS Subject的学习笔记
    • Angular搜索场景中使用rxjs的操作符处理思路
    • Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
    • angular.js4使用 RxJS 处理多个 Http 请求
    • 学习RxJS之JavaScript框架Cycle.js

    广而告之:
    热门推荐:
    怎么样防止针对织梦DEDECMS网站的DDos攻击?

    如何防止dede网站DDos被攻击;第一步:进入后台,系统-》添加新变量变量名称:cfg_anquan_cc 变量类型:布尔(Y/N) 参数说明:是否开启防CC攻击: 变量值:Y 第二步:编辑,/member/config.php 在require_once(DEDEINC.'/dedetemplate.class.php');下添加···

    jquery验证邮箱格式是否正确实例讲解

    我们来看看都有哪些邮箱: 我们如果一个个的邮箱进行判断,显然是不可能的了。 —个完整的Internet邮件地址由以下两个部分组成,格式如下:登录名@主机名.域名 中间用—个表示“在”(at)的符号“@”分开,符号的左边是对方的登录名,右边是完整的主机名,它由主机名与域名 组成。···

    浅谈php+phpStorm+xdebug配置方法

    1.下载xdebug文件 http://xdebug.org/wizard.php 将phpinfo()的源代码复制到文本框中,xdebug会提示如何配置和下载哪个版本的xdebug。 全部下载地址: http://www.xdebug.org/download.php 2.配置php.ini,在末尾加上。 zend_extension="php_xdebug-2.3.3-5.6-vc11.dll" xdebug···

    《PHP边学边教》(02.Apache+PHP环境配置——上篇)

    小提示:如果你还没有下载相关软件的话,请先去看开篇教程哦! 必 看:如果你已经装了IIS服务器,请到:“开始—> 程序 —> 管理工具 —> Internet 信息服务(IIS)管理器 —> 网站”将所有网站停止。否则将导致Apache无法···

    MySQL中使用replace、regexp进行正则表达式替换的用法分析

    本文实例讲述了MySQL中使用replace、regexp进行正则表达式替换的用法。分享给大家供大家参考,具体如下: 今天一个朋友问我,如果将数据库中查到的类似于“./uploads/110100_cityHotel_北京富豪华宾馆.jpg”这样的格式都修改为“./uploads/110100cityHotel北京富豪华宾馆.jpg”这样···

    js脚本获取webform服务器控件的方法

    asp.net webform中获取服务器控件,js脚本获取服务器控件需要使用ClientID web前台获取控件: <%=TextBox1.ClientID %>会打印出TextBox1的控件ID js脚本中获取webform控件:(实现当鼠标移到控件时,控件颜色变成红色) 复制代码 代码如下: <script type="text/javas···

    微信小程序开发教程之增加mixin扩展

    Mixin简介 Mixin(织入)模式并不是GOF的《设计模式》归纳中的一种,但是在各种语言以及框架都会发现该模式(或者思想)的一些应用。简单来说,Mixin是带有全部实现或者部分实现的接口,其主要作用是更好的代码复用。 Mixin这个概念在React, Vue中都有支持,它为我们抽象业务逻···

    asp.net 相关文章实现方法第1/2页

    前言:大家或许会觉得很惊讶:为什么灵感之源会讨论SQL?或许应该这样说吧:搞业务系统,不跟SQL扯上关系似乎比较难。 场景:在开发某系统的过程中,我遇到了要实现“相关文章”功能:任何文章都可以定义“关键字”,每篇文章依靠这个“关键字”来确定其它文章是否跟它相关,···

    asp.net 操作XML 按指定格式写入XML数据 WriteXml

    复制代码 代码如下:Private Sub WriteXml() Try Create(strFName, "NewDataSet") SaveXMLFile("gg", "NewDataSet", True) Catch ex As Exception MsgBox(ex.Message) End Try End Sub Private Function Create(ByVal FileName As String, ByVal Root As String) As Boole···

    mysql中TINYINT的取值范围

    在MySQL的数据类型中,Tinyint的取值范围是:带符号的范围是-128到127。无符号的范围是0到255(见官方《MySQL 5.1参考手册》http://dev.mysql.com/doc/refman/5.1/zh/column-types.html#numeric-types)。 Tinyint占用1字节的存储空间,即8位(bit)。那么Tinyint的取值范围怎···