问题标签 [switchmap]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
487 浏览

javascript - switchMap 由 RxJs 中的属性区分

比方说,我有一个动作流。每个动作都分配了一些 id。像这样:

现在,对于每个动作,我想在 switchMap 中执行一些逻辑:

问题是每个发出的动作都会取消以前的“一些可取消的逻辑”。

是否可以根据操作id取消“一些可取消的逻辑” ,最好是操作员?就像是:

本质上,switchMap的当前行为
1. actions$发出 id #1。switchMap订阅嵌套的 observable。
2. actions$发出 id #2。switchMap取消订阅之前的嵌套 observable。订阅新的。
3. actions$发出 id #1。switchMap再次取消订阅之前的嵌套 observable。订阅新的。

预期行为
1. actions$发出 id #1。switchMap订阅嵌套的 observable。
2. actions$发出 id #2。switchMap再次订阅嵌套的 observable(这次是 #2)。这就是区别,它不会取消来自 #1 的那个
3. actions$发出 id #1。switchMap取消订阅 #1 的嵌套 observable。再次订阅,#1。

0 投票
1 回答
7453 浏览

angular - 如何使用switchMap取消http请求?

如果我向服务器发出新的 http 请求,我想取消以前的 http 请求,但它没有按预期工作。

如果函数中的某些值发生更改,我想取消请求我的意思是如果值更改旧请求应该取消并且应该为此创建新请求,我已经这样做了

1) 创建了一个主题 - 将由observable
public stringVar = new Subject<string>();

2) 创建一个 observable 来观察主题并发送更新流(您将订阅它以获取更新流)

3)在一个特定的函数中,我将值作为参数,所以我执行这些步骤

当值要改变但第一次出现不同的奇怪行为时,请求是可取消的,只有一个请求是模式,但是当我第二次单击它时,它会调用 api 两次,这将继续。我的代码有什么问题?

在 component.ts

在服务文件中

如果组件中的值“selectedValue”发生更改,我想取消我的旧请求并创建新请求。

0 投票
1 回答
628 浏览

angular - Angular 6 RxJS 链接多个依赖订阅

我希望有人可以就如何执行以下操作提供一些建议:

我需要链接多个 http 请求,每个请求取决于前一个的结果。

IE

第 1 步:登录用户

第 2 步:经过身份验证的 Http 请求

第 3 步:经过身份验证的 Http 请求,其中包含来自第 2 步的响应值

第 4 步:经过身份验证的 Http 请求,其中包含来自第 3 步的响应值

到目前为止,我有以下代码(有效):

以上方法有效,但似乎不是最合适的方式。我似乎建议使用 switchMap,但不确定这是否是正确的方法。如果有人可以就如何更正确地执行上述操作提供任何指导,那么将不胜感激。

提前致谢

0 投票
0 回答
1758 浏览

angular - 如何使用 Rxjs 运算符在 Angular 中取消先前的 http 请求

我正在尝试使用 Rxjs 取消任何待处理的请求。我浏览了一些建议使用SwitchMap()anddebounceTime()运算符的文档/博客。我正在尝试相同但无法取消之前的待处理请求。

就我而言,我收到了所有先前和最新请求的响应。下面是代码和问题描述。

我有 n 个按钮,单击每个按钮时,我使用主题发出事件(id),然后使用该 id 发出 http 请求。我想要实现的是,当单击一个新按钮时,如果有任何尚未收到响应的其他按钮单击的先前未决请求,我想取消该请求,即每次我点击/切换到新的按钮我应该只得到那个请求的响应,而不是旧的

在每次按钮单击时,发出一个 Id

服务电话

0 投票
1 回答
124 浏览

typescript - RXJS Observable 在第一次运行管道后意外完成

我有一个 Angular 应用程序,它具有持久性存储和存储项的密钥列表。我想在应用程序启动时将已知键的值从持久存储异步加载到内存中,以便在应用程序运行时可以同步访问它们。所以我创建了一个 Observable,它遍历键列表的所有元素并附加一个管道,它应该获取每个元素的值并移交键和值的组合,因此我可以将它们存储在缓存中。应该捕获在持久存储中找不到值的情况。不幸的是,这仅适用于其中一个键。然后外部 Observable 意外完成。

通过查看日志,我可以看到,外部 Observable 正确地迭代了键列表的三个元素并运行了 switchMap()。但是只有一个值从持久存储中提取出来,并且在 localStorageService.get()-Observable 完成第一个元素之后,from-Observable 完成。

日志显示了这一点:

  • from() $.next => (2) ["authorizationDataIdToken", 1]
  • switchMap(): 键:authorizationDataIdToken
  • from() $.next => (2) ["_isAuthorized", 0]
  • switchMap(): 键: _isAuthorized
  • from() $.next => (2) ["userData", 0]
  • switchMap():键:用户数据
  • 来自() $.complete
  • localStorageService.get(userData) $.next => [object Object]
  • from() - 在 switchMap $.next => (2) ["userData", "[object Object]"] 之后
  • OIDC 存储:缓存键:userData,值:[object Object]
  • localStorageService.get(userData) $.complete
  • from() - 在 switchMap $.complete 之后
  • OIDC 存储:随时可用。

这是加载到缓存功能的代码:

这是本地存储服务的 get() 函数的签名:

我希望对 from-Observable 发出的每个元素都执行本地存储服务的 get() 函数的调用,但是我可以看到它只调用了一次并且不知道我做错了什么。

0 投票
1 回答
12200 浏览

angular - 打字稿:错误 TS2740:类型“{}”缺少类型“产品 []”中的以下属性:长度、弹出、推送、连接以及另外 26 个

使用 Angular 4,我从可观察对象中的 firebase db 获取数组列表。如何将可观察对象的类型更改为数组或反之亦然以使其工作?

我写的没有不同的功能。我正在使用一个内置函数 switchMap,其中分配了一个 Products 数组。我无法弄清楚如何更改或使 switchMap 可观察到数组可观察。

switchMap observable 一次返回一项的结果,这里有一个数组列表。我如何使它工作。

0 投票
0 回答
377 浏览

javascript - 在 SwitchMap 运算符中使用 Promise

这两行代码都解决了承诺,但是有人真的可以指出这两行代码之间有什么不同吗?

0 投票
1 回答
2019 浏览

angular - Angular Rxjs 多个并行 HTTP 请求/调用阻塞导航 - 优先取消队列并发

我知道有类似的线程,但没有一个为我的问题提供合适的解决方案。

Pre: 我在服务器端和客户端同时导航。这意味着使用 routerLink 和任何被调用的路由在前端的每个导航都伴随着对服务器的 HTTP 请求调用。

情况:我正在打开一个对话框来显示一个表单来创建一个position. 为此,position我需要显示elements我从 API 加载的列表。对于每个element我需要加载一个额外的thumbnail. 所以我需要一个 API 调用来获取 86 elements,然后是 86 请求来获取thumbnails。我将这些元素保存在服务中以防止再次加载它们。因此,我在elements加载它们之前检查是否已经存在。当我打开对话框时,API 调用就开始了。

缩略图请求方法:

问题:如果用户决定取消表单并想要向前/向后导航 - 他不能,因为它navigation request位于队列的末尾。

是否有任何方法可以将较低的thumbnail呼叫优先级设置为在较小的负载上处理?

提前致谢。

0 投票
2 回答
1407 浏览

angular - 在角度服务中的 HTML 请求之后在内部调用另一个 HTTP 请求

在一些角度服务中,我需要调用一个名为的 PUT 方法,完成后我需要调用另一个 GET 方法。然后 GET 方法的结果应该存储在服务本身的变量中。

我写的代码有一些问题。因为当我从组件调用服务时,isUpdateSuccess 在组件中显示为未定义。

在这里,我不需要将“应用程序”对象传递给组件。我只需要将 ApplicationStatusModel 作为 observable 传递。但是如上所述,我需要将应用程序对象保存到名为 myApplication 的变量中。

我读了几篇文章,也浏览了一些 Stackoverflow 帖子。还没有运气。

服务

}

组件(调用“updateStudentAssessmentStatus”)

0 投票
1 回答
1116 浏览

rxjs - rxjs switchMap和点击问题

我正在玩 switchMap 运算符,以清楚地了解“切换”的内部可观察对象发生了什么。

起初我认为 switchMap 只是从切换的内部 observable 中“取消订阅”,但后来我意识到它实际上是“取消订阅并完成”内部 observable。

为了确认我已经写了这个小片段: https ://codesandbox.io/s/relaxed-meninsky-c5jmw?fontsize=14

如您所见,在主题第二次发出时正确调用了finalize()运算符,但是:
为什么不调用tap运算符的完整处理程序

不知何故,我对这个运算符的理解只有 80% 感到满意。

与此无关:
我已阅读并观看了有关 switchMap 的大量资料,包括:

而且他们都没有明确说明内部可观察对象是否已取消订阅或取消订阅并已关闭(或者至少我不明白:))

我看过switchMap算子源码,没有提到takeXXX算子,没有那个怎么能完成内层算子呢?

tl;博士

  • 您是否确认 switchMap 在切换时完成了内部可观察?
  • 为什么水龙头操作员不能按预期工作?
  • 如果 switchMap 有效地完成了内部 observable,他怎么能在内部不使用 takeXXX 运算符的情况下做到这一点?