jjzjj

javascript - 等待用 RxJs 解决的 promise

coder 2025-03-31 原文

我正在尝试使用 RxJS v5 beta 为表单实现“保存类型”功能.

当用户在文本字段中输入时，数据应该被发送到后端。我正在创建一个 Rx.Subject 来为新用户输入触发新事件 (next()) 并将其与 HTTP 请求一起发布。

我以这个问题为起点:RxJS wait until promise resolved

但是，使用这篇文章中的解决方案，同时向后端发送请求。

我的目标是只发送一个请求并推迟后续请求，直到正在运行的请求完成。完成请求后，应发出最后一个未决事件(就像 debounceTime 中的情况一样)

以下代码段中的示例 函数使用链接的 SO 问题中的方法。这将发送对所有输入值的请求。

workaround 函数使用存储在“流”外部的 promise 来阻止并等待先前的请求。这有效并且只发送对最后一个输入值的请求。但这似乎没有遵循 RxJs 的概念并且感觉很 hacky。

有没有办法用 RxJS 实现这个？

function fakeRequest(value) {
  console.log('start request:', value)
  return new Promise((resolve) => { 
    setTimeout(() => resolve(value), 1000);
 });
}

function example() {
  let subject = new Rx.Subject();
  
  subject
    .debounceTime(500)
    .switchMap(input => fakeRequest(input))
    .subscribe(data => console.log(data))

  subject.next('example value 1');
  subject.next('example value 2');
  subject.next('example value 3');
  subject.next('example value 4');
}


function workaround() {
  let subject = new Rx.Subject();

  let p = Promise.resolve();
  subject
    .debounceTime(500)  
    .switchMap(input => p.then(() => input))
    .do(input => p = fakeRequest(input))
    .subscribe(data => console.log(data))

  subject.next('workaround value 1');
  subject.next('workaround value 2');
  subject.next('workaround value 3');
  subject.next('workaround value 4');
}

example();
// workaround();
<script src="https://unpkg.com/@reactivex/rxjs@5.0.0-rc.2/dist/global/Rx.js"></script>

最佳答案

如果您想按顺序运行请求而不丢弃任何请求，请使用 concat() 或 concatMap()运营商。这些等待直到前一个 Observable 完成，然后继续下一个。

function fakeRequest(value) {
  console.log('start request:', value)
  return new Promise((resolve) => { 
    setTimeout(() => resolve(value), 1000);
 });
}

let subject = new Subject();
subject.concatMap(value => Observable.fromPromise(fakeRequest(value)))
  .subscribe(value => console.log(value));

subject.next('example value 1');
subject.next('example value 2');
subject.next('example value 3');
subject.next('example value 4');

这会打印到控制台:

start request: example value 1
example value 1
start request: example value 2
example value 2
start request: example value 3
example value 3
start request: example value 4
example value 4

查看现场演示:https://jsbin.com/xaluvi/4/edit?js,console

如果您想忽略值，那么 debounce、throttle 或 audit 都是不错的选择。

编辑:在较新的 RxJS 版本中，您甚至不需要使用 fromPromise(或 from)，只需在 concatMap。

关于javascript - 等待用 RxJs 解决的 promise ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40587792/

待用javascriptcodevalueexamplerxjsrxjs5

有关javascript - 等待用 RxJs 解决的 promise的更多相关文章

  1. 屏幕录制为什么没声音？检查这2项，轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题，比如录制的视频没有声音。屏幕录制为什么没声音？今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音，你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音，屏幕录制为什么没声音？如果当时没有打开音频录制，则录制好的视频是没有声音的。因此，建议在录制前进行检查。屏幕上没有声音，很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音，即可录制音频和图画同步视频。操作方法：步骤1：点击电脑屏幕右下侧的“小喇叭”图案，在上方的选项中，选择“声音”。 步骤2：在“声

  2. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容：函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数，那么至少存在一个，使得:通过这个表达式我们可以知道，f(x)是函数的主体，a和b可以看作是主体函数f(x)中所取的两个值。那么可以有，  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法： 外层函数f(x)是一致的，并且h(x)和g(x)是等价无穷小。此时，利用拉格朗日定理，将原式替换为 ，再进行求解，往往会省去复合函数求极限的很多麻烦。使用要注意：1.要先找到主体函数f(x)，即外层函数必须相同。2.f(x)找到后，复合部分是等价无穷小。3.要满足作差的形式。如果是加

  3. 深度学习部署：Windows安装pycocotools报错解决方法 - 2

    深度学习部署：Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯：公主号AiCharm本系列是作者在跑一些深度学习实例时，遇到的各种各样的问题及解决办法，希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby - 如何更快地解决 project euler #21？ - 2

    原始问题Letd(n)bedefinedasthesumofproperdivisorsofn(numberslessthannwhichdivideevenlyinton).Ifd(a)=bandd(b)=a,whereab,thenaandbareanamicablepairandeachofaandbarecalledamicablenumbers.Forexample,theproperdivisorsof220are1,2,4,5,10,11,20,22,44,55and110;therefored(220)=284.Theproperdivisorsof284are1,2,

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. ruby - 为什么这些方法没有解决？ - 2

    这个问题在这里已经有了答案:WhydoRubysettersneed"self."qualificationwithintheclass?(3个答案)关闭29天前。给定这段代码:classSomethingattr_accessor:my_variabledefinitialize@my_variable=0enddeffoomy_variable=my_variable+3endends=Something.news.foo我收到这个错误:test.rb:9:in`foo':undefinedmethod`+'fornil:NilClass(NoMethodError)fromtes

  8. 电脑启动后显示器黑屏怎么办？排查下面4个问题，快速解决 - 2

    电脑启动出现显示器黑屏是一个相当常见的问题。如果您遇到了这个问题，不要惊慌，因为它有很多可能的原因，可以采取一些简单的措施来解决它。在本文中，小编将介绍下面4种常见的电脑启动后显示器黑屏的原因，排查这些原因，快速解决！ 演示机型：联想Ideapad700-15ISK-ISE系统版本：Windows10一、显示器问题如果出现电脑启动后显示器黑屏的情况。那么首先您需要检查一下显示器是否正常工作。您可以通过更换另一个显示器或将当前显示器连接到另一台计算机来检查显示器是否存在问题。如果问题仍然存在，那么您可以排除显示器故障的可能性。 二、显卡问题如果您的电脑配备了独立显卡，那么显卡故障也可能是导致电脑

  9. 关于Qt程序打包后运行库依赖的常见问题分析及解决方法 - 2

    目录一.大致如下常见问题：（1）找不到程序所依赖的Qt库version`Qt_5'notfound(requiredby（2）CouldnotLoadtheQtplatformplugin"xcb"in""eventhoughitwasfound（3）打包到在不同的linux系统下，或者打包到高版本的相同系统下，运行程序时，直接提示段错误即segmentationfault，或者Illegalinstruction(coredumped)非法指令（4）ldd应用程序或者库，查看运行所依赖的库时，直接报段错误二.问题逐个分析，得出解决方法：（1）找不到程序所依赖的Qt库version`Qt_5'

  10. 【RuntimeError: CUDA error: device-side assert triggered】问题与解决 - 2

    RuntimeError:CUDAerror:device-sideasserttriggered问题描述解决思路发现问题：总结问题描述当我在调试模型的时候，出现了如下的问题/opt/conda/conda-bld/pytorch_1656352465323/work/aten/src/ATen/native/cuda/IndexKernel.cu:91:operator():block:[5,0,0],thread:[63,0,0]Assertion`index>=-sizes[i]&&index通过提示信息可以知道是个数组越界的问题。但是如图一中第二行话所说这个问题可能并不出在提示的代码段

随机推荐