当我使用Angular作为项目时，我遇到了一个麻烦的问题。具体问题如下：

循环请求一个接口，如何保证接口返回的数据和请求的顺序一致？

实际业务场景如下：前端需要请求后端接口获取文件处理进度，并在前端用进度条显示。如下图所示：

首先想到的是对定时请求使用setTimeout或setInterval。不过，结果有点奇怪。进度条的变化不是递增的，而是快慢的，比如30%、20%、50%、40%。仔细想想，你就知道问题出在哪里了。异步请求的结果不会按顺序返回。

我在之前的工作中没有遇到过这种需求，所以不确定如何用传统的方式解决。然而幸运的是，RxJS恰好擅长处理这样的问题。我立即浏览了文档，区间运算符可以处理定时任务，更强大的是返回的结果是有序的。

间隔(周期： 0=0，调度程序：调度程序像=异步):可观察到的数字首先，看看间隔的描述：

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

Interval返回一个可观察的对象，它可以定期发送增量值，但第一次发送值是在第一个周期结束后进行的。

以下是官方示例：

从“rjs”导入{ interval }；从“rxjs/operators”导入{ take }；const numbers=interval(1000)；const take four numbers=numbers . pipe(take(4))；takefournumbers . subscribe(x=console . log(' next : '，x))；//logs ://next : 0//next : 1//next : 2//next : 3，但是看官方的例子还是有点混乱。如果是http请求，应该如何写参数？或者应该在哪里写http请求？

这个地方的坑有点深，看了外国资料终于找到了答案。直接编码。

//请求这个。定时器$=间隔(1000)。管道(///取消过时的请求值switch map(()={返回此。http。get(API))；}),).subscribe((RES : any)={//百分比处理逻辑}，()={this.timer$。unsubscribe()；}，()={ this.timer$。unsubscribe()；}, );一般来说，是通过管道处理请求。最后的结果是完美的。

摘要

rjs确实是一个非常强大的工具库，尤其是在处理异步交互的时候，真的很省时省力，但是国内的技术文章很少，遇到难题需要参考国外的文章。欢迎评论交流。

好了，这就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。