开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

RxJs forkJoin几个连续的观察量

RxJs forkJoin 基础概念

forkJoin 是 RxJs 中的一个操作符，用于并行地订阅多个 Observable，并在所有 Observable 都完成时，将它们的最后一个值组合成一个数组返回。这个操作符类似于 JavaScript 的 Promise.all，但它是专门为异步流设计的。

优势

并行执行：forkJoin 允许你并行地执行多个异步操作，而不是顺序执行，从而提高性能。
结果组合：当所有 Observable 完成时，forkJoin 会将它们的结果组合成一个数组，便于后续处理。
错误处理：如果任何一个 Observable 发生错误，forkJoin 会立即终止并抛出该错误。

类型

forkJoin 接受一个 Observable 数组作为参数，并返回一个新的 Observable。

应用场景

并行数据获取：当你需要从多个 API 端点获取数据时，可以使用 forkJoin 来并行执行这些请求。
并行计算：当有多个独立的计算任务需要执行时，可以使用 forkJoin 来并行处理这些任务。

示例代码

以下是一个使用 forkJoin 的示例，展示了如何并行获取两个 API 的数据：

import { forkJoin, of } from 'rxjs';
import { ajax } from 'rxjs/ajax';

const request1 = ajax.getJSON('https://api.example.com/data1');
const request2 = ajax.getJSON('https://api.example.com/data2');

forkJoin([request1, request2]).subscribe({
  next: ([data1, data2]) => {
    console.log('Data from API 1:', data1);
    console.log('Data from API 2:', data2);
  },
  error: err => console.error('Error:', err),
  complete: () => console.log('All requests completed')
});

常见问题及解决方法

问题：为什么 `forkJoin` 没有按预期工作？

原因：

Observable 没有完成：如果任何一个 Observable 没有完成（例如，被取消订阅或发生错误），forkJoin 将不会返回结果。
Observable 数组为空：如果传递给 forkJoin 的 Observable 数组为空，它将立即完成并返回一个空数组。

解决方法：

确保所有 Observable 都能正常完成。
在使用 forkJoin 之前，检查 Observable 数组是否为空。

import { forkJoin, of } from 'rxjs';
import { ajax } from 'rxjs/ajax';

const request1 = ajax.getJSON('https://api.example.com/data1');
const request2 = ajax.getJSON('https://api.example.com/data2');

if (request1 && request2) {
  forkJoin([request1, request2]).subscribe({
    next: ([data1, data2]) => {
      console.log('Data from API 1:', data1);
      console.log('Data from API 2:', data2);
    },
    error: err => console.error('Error:', err),
    complete: () => console.log('All requests completed')
  });
} else {
  console.error('No requests to perform');
}

参考链接

通过以上信息，你应该能够更好地理解 forkJoin 的基础概念、优势、类型、应用场景以及常见问题的解决方法。

相关搜索:RxJS可观察到的forkJoin未并行执行草率的forkjoin替代rxjs可观察到的链接？将观察量数组转换为可观察量数组rxjs 使用ForkJoin和对象的RXJS 使用rxjs连续发送请求，就像forkJoin的系列版本一样 forkjoin和combineLatest rxjs之间的区别 rxjs将数组转换为可观察的数组以便并行执行(使用forkJoin)？rxjs传递forkjoin函数，该函数返回一个观察值数组观察到的forkJoin未触发可观察的forkjoin从不执行可观察的angular2 使用switchmap和forkjoin链接观察值不能像预期的角度类型脚本rxjs那样工作 RxJs可观察的重复值使用RXJS取消/重置正在进行的forkJoin请求 Rxjs Forkjoin，如何返回特定属性的单个数组？如何订阅可观察Forkjoin不工作的数组 RXJS -多个连续的http请求 RxJS:更新一个带有更多/更少观察量的`comineLatest`进行组合使用rxjs中的观察者/观察者 RxJS可观察:重试失败的承诺 RxJs:可观察搜索结果的模式

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

继续解惑，异步处理 —— RxJS Observable

接上一篇《Js 异步处理演进，Callback=>Promise=>Observer》，可能不少掘友对 Observer 还心存疑虑，本篇继续解惑~

03

深入浅出 RxJS 之合并数据流

RxJS 提供了一系列可以完成 Observable 组合操作的操作符，这一类操作符称为合并类（combination）操作符，这类操作符都有多个 Observable 对象作为数据来源，把不同来源的数据根据不同的规则合并到一个 Observable 对象中。

01

What’s New in RxJS v6.5

基于原生的 fetch API，RxJS 进行了封装并提供了 fromFetch 方法，也就是利用原生的fetch发http请求并返回为Observable 类型。而且还支持通过基于原生的FetchController 实现取消发送中的请求。

04

RxJS 处理多个Http请求

有时候进入某个页面时，我们需要从多个 API 获取数据然后进行页面显示。管理多个异步数据请求会比较困难，但我们可以借助 Angular Http 服务和 RxJS 库提供的功能来实现上述的功能。处理多个请求有多种方式，使用串行或并行的方式。

02

Angular进阶教程2-<依赖注入+RxJS>

组件\color{#0abb3c}{组件}组件不应该直接获取或保存数据，它们应该聚焦于展示数据，而把数据访问和处理的职责委托给某个服务\color{#0abb3c}{服务}服务。那面对组件和服务之间的关系，该如何处理他们之间的依赖关系呢？Angular就引入了依赖注入框架\color{#0abb3c}{依赖注入框架}依赖注入框架去解决这件事情。

03

Angular 使用 RxJS 优化处理多个Http请求

注意：上面的this.http.get... 处理HTTP最好放到单独的Service文件中，再注入到Component。这里为了演示没有这么做。

01

[译] 调试 RxJS 第2部分: 日志篇

原文链接: https://blog.angularindepth.com/debugging-rxjs-part-2-logging-56904459f144 本文为 RxJS 中文社区翻译文章

04

用VSCode开发一个asp.net core2.0+angular5项目(5): Angular5+asp.net core 2.0 web api文件上传

这部分就讲从angular5的客户端上传图片到asp.net core 2.0的 web api. 这是需要的源码: https://pan.baidu.com/s/1Eqc4MRiQDwOHmu0O

05

RxJS：给你如丝一般顺滑的编程体验（建议收藏）

怀着对于RxJS这项技术的好奇，笔者花了数天时间研究了这项技术，并肝了一包枸杞才完成这篇文章的撰写，属实不易。不过也正是通过这段时间的学习，我发现这项技术在一定程度上可以解决我在日常业务中遇到的一些痛点，以及有种想马上应用到自己的新项目中的欲望，的确这种以数据流的理念来管控大型项目中的数据能给人带来一种十分优雅的编程体验。

08

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

介绍RxJS前，先介绍Observable 可观察对象（Observable）可观察对象支持在应用中的发布者和订阅者之间传递消息。可观察对象可以发送多个任意类型的值 —— 字面量、消息、事件。基本用法和词汇作为发布者，你创建一个 Observable 的实例，其中定义了一个订阅者（subscriber）函数。当有消费者调用 subscribe() 方法时，这个函数就会执行。订阅者函数用于定义“如何获取或生成那些要发布的值或消息”。要执行所创建的可观察对象，并开始从中接收通知，你就要调用它的 s

02

深入浅出 RxJS 之 Hello RxJS

顾名思义，Observable 就是“可以被观察的对象”即“可被观察者”，而 Observer 就是“观察者”，连接两者的桥梁就是 Observable 对象的函数 subscribe。

01

Redux/Mobx/Akita/Vuex对比 - 选择更适合低代码场景的状态管理方案

近期准备开发一个数据分析 SDK，定位是作为数据中台向外输出数据分析能力的载体，前端的功能表现类似低代码平台的各种拖拉拽。作为中台能力的载体，SDK 未来很大概率会需要支持多种视图层框架，比如Vue2/Vue3/React等。所以在技术架构上对视图层框架的依赖性越轻，迭代的成本越低。基于这样的目标，本文对前端状态管理工具进行调研，在技术选型上应当尽量减轻与视图框架的绑定程度，理想的目标是构建与视图框架无关的数据/状态管理层。

01

如何使用 RxJS 更优雅地进行定时请求

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

04

RxJS在快应用中使用

Rx（ReactiveX）是一种用来管理事件序列的理想方法，提供了一套完整的 API，它的设计思想组合了观察者模式，迭代器模式和函数式编程。响应式编程在各个编程语言中都有对应的实现，应用较为广泛的是 RxJava 以及 RxJS。

00

Angular vs React 最全面深入对比

如今，Angular和React这两个JavaScript框架可谓红的发紫，同时针对这两个框架的选择变成了当下最容易被问及或者被架构设计者考虑的问题，本文或许无法告诉你哪个框架更优秀，但尽量从更多的角度去比较两者，尽可能的为你在选择时提供更多的参考意见。选择的方法在选择之前，我们尝试带着一些问题去审视你将要选择的框架（或者是任何工具），尝试用这些问题的答案来帮助我们更加了解框架，也更加让选择变得更容易框架本身的问题：是否成熟？谁在背后支持呢？具备的功能？采用什么架构和模式？生态系统是否丰富

07

一道Google面试题：如何分解棘手问题（下）

在上一篇文章中，我们讲了创建数据模型，数据处理以及预处理优化，今天我们继续接下来的内容。

03

RxJS Subject

观察者模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。

03

学习 RXJS 系列（一）——从几个设计模式开始聊起

一、RXJS 是什么 RXJS 是 Reactive Extensions for JavaScript 的缩写，起源于 Reactive Extensions，是一个基于可观测数据流 Stream 结合观察者模式和迭代器模式的一种异步编程的应用库。RxJS 是 Reactive Extensions 在 JavaScript 上的实现。二、前置知识响应式编程响应式编程（Reactive Programming）是一种基于事件的模型，它是一种面向数据流和变化传播的编程范式。这意味着可以在编程语言中很方

02

构建流式应用：RxJS 详解

作者：TAT.郭林烁 joeyguo 原文地址最近在 Alloyteam Conf 2016 分享了《使用RxJS构建流式前端应用》，会后在线上线下跟大家交流时发现对于 RxJS 的态度呈现出两大类

03

干货 | 浅谈React数据流管理

颜陈宇，携程玩乐高级前端开发工程师，前端架构组成员，目前主要负责玩乐国际化项目的App、H5以及Online三端技术架构。热衷于react技术栈，喜欢阅读和分享。

02

ForkJoin 线程池[通俗易懂]

严格来讲，分而治之不算一种模式，而是一种思想。它可以将一个大任务拆解为若干个小任务并行执行，提高系统吞吐量。主要讲两个场景，Master-Worker 模式，ForkJoin 线程池。

02

你就是函数响应式编程（FRP）啊？!【附 RxJS 实战】

英文全称是：Functional Reactive Programming，翻译过来就是：函数响应式编程。

01

7. 操作符 from, of, range, interval, timer

下面介绍几个可以创建Observable的运算符，具体的介绍请问官网例子：https://codepen.io/mafeifan/pen/eQKNvN

03

3 分钟温故知新 RxJS 【创建实例操作符】

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

04

4. Rxjs 介绍及注意事项

先梳理一些概念： Rx：ReactiveX是Reactive Extensions的缩写，一般简写为Rx，最初是LINQ的一个扩展，由微软的架构师Erik Meijer领导的团队开发，在2012年11月开源，Rx是一个编程模型，目标是提供一致的编程接口，帮助开发者更方便的处理异步数据流，Rx库支持.NET、JavaScript和C++，Rx近几年越来越流行了，现在已经支持几乎全部的流行编程语言了，Rx的大部分语言库由ReactiveX这个组织负责维护，比较流行的有RxJava/RxJS/Rx.NET，社区网站是 reactivex.io。

02

一个线上bug引出的parallelStream() for循环背后面的ForkJoin ...

公司的一个ETL项目，主要是从Blob上的CSV文件和HDFS平台下载数据并解析后入到业务的Mysql,数据量大概一个小时20个文件左右(基本集中到每个小时的50分左右),每个文件8~20万条数据量，分别入到不同的表, 我们在入库的时候是把文件解析后分成1000条一批批量插入(篇幅有限，这里只聊入库的场景)。用的是jdk1.8的Stream.parallel()的方式并发入库。

03

成果被他人窃取_工作窃取模式

ForkJoin(分支合并)是jdk1.7之后出来的，并行执行任务，提高效率，用在大数据量场景下。

03

[译] 调试 RxJS 第1部分: 工具篇

原文链接: https://blog.angularindepth.com/debugging-rxjs-4f0340286dd3 本文为 RxJS 中文社区翻译文章，如需转载，请注明出处，谢谢合作

04

创建 Observable

在 RxJS 中为我们提供了很多创建 Observable 对象的方法，其中 create 是最基本的方法。它是 Observable 类的静态属性 —— static create: Function，也是创建 Observable 对象的工厂方法。

01

彻底搞懂RxJS中的Subjects

每周大约有1700万次npm下载，RxJS在JavaScript世界中非常受欢迎。如果您是Angular开发人员，则不会错过RxJS Observables，但您可能对Subjects不太熟悉。虽然它们不像简单的Observable被频繁使用，但还是非常有用的。了解它们将帮助我们编写更好，更简洁的响应式代码。

02

Rxjs入门

Rxjs英文官网域名已经变为 https://rxjs-dev.firebaseapp.com/

03

RxJs简介

这两年，各种异步编程框架，上面RxJava,RxAndroid,RxSwift等等，今天要聊的是RxJs，对于我等入门不久的前端工程师来说，这个框架还是比较有新颖的，中文官网地址：http://cn.rx.js.org/

01

Angular 6 HttpClient 快速入门

本教程将介绍如何在 Angular 6.x 中使用 HttpClient 发送 Http 请求，如 get、post、put 和 delete 请求。在 Angular 4.3+ 版本之后引入了 HttpClientModule 模块，该模块提供的 HttpClient 服务是已有 Angular HTTP API 的演进，它在一个单独的 @angular/common/http 包中。

03

RxJS 快速入门

我们都知道 JavaScript 是个多范式语言，它既支持过程式编程，又支持函数式编程，两者分别适用于不同的场合。在同步环境下，两者各有优缺点，甚至有时候过程式会更简明一些，但在异步环境下（最典型的场景是一个 Ajax 请求完成后紧接着执行另一个 Ajax 请求），由于无法控制执行和完成的顺序，所以就无法使用传统的过程式写法，函数式就会展现出其优势。

02

并发编程系列之什么是ForkJoin框架？

ForkJoin框架是java的JUC包里提供的，用于处理一些比较繁重的任务，会将这个大任务分为多个小任务，多个小任务处理完成后会将结果汇总给Result，体现的是一种“分而治之”的思想。第一步，拆分fork任务，将大任务分为多个小任务；第二步，归并join，会将小任务的处理结果进行归并为一个结果。

02

Angular 自定义服务 notification

我们在 app/services 中添加 notification.service.ts 服务文件（请使用命令行生成），添加相关的内容：

03

如何处理变慢的API？

在开始时表现良好的API会随着时间的推移而导致性能降低。学习如何管理和解决这些性能问题是开发者必须具备的技能之一。作为一名工程师，你花了很多时间在API上——你要么是为别人构建API，要么是在使用别人的API。使用API既是一门艺术，也是一门科学。工程师们犯的最常见的错误之一就是对性能的思考不够充分。我们希望让事情先做起来，然后再处理性能问题。这很好，但是如果在构建v1的时候能够意识到这一点，你以后就可以避免。如果你使用API的时间够长，我相信你知道刚开始一切都很顺利，但随着时间的推移，API就会变得缓慢

07

[译]Rxjs&Angular-退订可观察对象的n种方式

在angular项目中我们不可避免的要使用RxJS可观察对象(Observables)来进行订阅(Subscribe)和退订(Unsubscribe)操作;

00

谈谈我对 Reacitive 方法的理解

本文我想和大家分享一下我对当前 Reactivity 方法和现状的理解。我并不是说我的观点就是对的，但我认为，正是通过分享自己的观点，我们才能对行业中的事物达成共识，我希望这些来之不易的见解能够对其他人有所帮助，并补充他们理解中缺失的部分。

03

RxJS & React-Observables 硬核入门指南

Redux-observable是一个基于rxjs的Redux中间件，允许开发者使用异步操作。它是redux-thunk和redux-saga的替代品。

05

深入浅出vue_深入浅出pandas

Stream 不是集合元素，它不是数据结构并不保存数据，它是有关算法和计算的，它更像一个高级版本的 Iterator。原始版本的 Iterator，用户只能显式地一个一个遍历元素并对其执行某些操作；高级版本的 Stream，用户只要给出需要对其包含的元素执行什么操作，比如 “过滤掉长度大于 10 的字符串”、“获取每个字符串的首字母”等，Stream 会隐式地在内部进行遍历，做出相应的数据转换。

01

【Rxjs】Rxjs_Subject 及其衍生类

在 RxJS 中，Observable 有一些特殊的类，在消息通信中使用比较频繁，下面主要介绍较常用的几个类：

05

你会用RxJS吗？【初识 RxJS中的Observable和Observer】

可以看到，我们用到了scan操作符，该操作符的工作方式和数组的reduce类似，回调函数接收一个值，回调的返回值作为下一次回调运行暴露的一个值。

03

Fork Join 并发任务执行框架

规模为N的问题,如果N<阈值,直接解决,N>阈值,将N分解为K个小规模子问题,子问题互相对立,与原问题形式相同,将子问题的解合并得到原问题的解

03

Rxjs 响应式编程-第四章构建完整的Web应用程序

在本章中，我们将构建一个典型的Web应用程序，在前端和后端使用RxJS。我们将转换文档对象模型（DOM）并使用Node.js服务器中的WebSockets进行客户端 - 服务器通信。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭