天道酬勤,学无止境

rxjs

第二个订阅不会从 RXJS 中的第一个订阅开始从 switchMap 开始(Second subscription doesn't start upon switchMap from the first one in RXJS)

问题 我有这个工作代码。 它从路由器获取 ID 并将其作为参数应用以加载组件的数据。 this.route.params.subscribe(_ => { this.id = _.id; this.service.getMineral(this.id) .subscribe(suc => this.data = suc, err => console.log(err)); } ); 然后,我尝试使用更好的方法,并希望在第一个订阅完成时调用第二个订阅。 根据此答案中的第二个示例,我应该共享第一个结果,然后切换地图以取消订阅并继续下一个。 所以我实现了以下内容。 const route$ = this.route.params.pipe(share()); const data$ = route$.pipe( switchMap(() => this.service.getMineral(this.id))); route$.subscribe(_ => this.id = _.id); data$.subscribe(suc => this.data = suc, err => console.log(err)); 遗憾的是,这不会调用服务器,也不会将数据传递给客户端。 在尝试了几次修改后,由于缺乏想法,我放弃了。 这两种方法之间的显着区别是什么? 我在哪里对第二个样本的解释感到困惑

2021-12-05 09:41:10    分类:技术分享    angular   typescript   rxjs   switchmap

Rxjs 在使用主题的反应文本输入组件上去抖动不会在无状态/功能组件上批量输入文本(Rxjs debounce on react text input component using Subjects does not batch input text on stateless/functional component)

问题 我试图更深入地研究 rxjs 并发现了一个问题,即我尝试去抖动的输入字段在每次按键时都会调度一个事件,去抖动只保存输出,但会生成如下树: a as(delay - waits 200ms, then fires the rest synchronously) asd asdf asdfg .... 相同的代码在类组件(https://stackoverflow.com/a/44300853/1356046)中按预期工作,但无法理解为什么它不适用于无状态组件。 这是一个示例:https://stackblitz.com/edit/react-hzhrmf - 您可以看到每次击键都会触发 useState 更新。 非常感谢。 回答1 React 不断调用你的函数来渲染组件。 因此,Subject 会不断地重新创建。 使用带有 useState 的工厂来保留主题并使用 useEffect 确保订阅只进行一次应该可以解决您的问题。 像这样的事情: import React, { Component, useState, useEffect, useRef } from 'react'; import { render } from 'react-dom'; import { debounceTime, map, tap, distinctUntilChanged } from

2021-12-05 07:09:21    分类:技术分享    javascript   rxjs   debouncing

Angular observables - 如果没有订阅,我是否需要取消订阅?(Angular observables - Do I need unsubscribe if no subscription?)

问题 我正在使用最新的 angular 8,并且对 observables 的概念还不熟悉。 问题是如果我直接调用一个 observable 而不是将它应用到订阅变量,我是否还需要取消订阅。 以下是我想知道是否需要取消订阅的情况? 提前谢谢了 场景 1 - 从组件调用 httpService: Service - httpService getContactsHttp(){ let headers: any = new HttpHeaders(this.authService.getHeadersClient()); return this.httpClient.get('/contacts', {headers: headers}) .pipe(timeout(this.authService.getTimeoutLimit('normal'))); } Component - Calling getContactsHttp and sorting response getContacts() { this.httpService.getContactsHttp().subscribe((data:any[])=>{ this.records = this.sortData(data) }) } 场景 2 - 在组件中订阅的 observable contacts$: new

2021-12-05 07:03:16    分类:技术分享    angular   rxjs   observable

从 post api call 得到响应后,抛出一个错误 => .pipe is not a function(After getting the response from post api call , an error is thrown => .pipe is not a function)

问题 我正在进行 api 调用并期待它的响应,该响应可以传递给第二个 api 调用,但出现错误 错误类型错误:this.helperService.getPointIdbyTags(...)[0].pipe 不是函数 在线 .pipe(switchMap((resarray:any)=>{ TS代码 someFunction(floor){ floor.entities.forEach(element => { let desiredTempForZone; this.getCurrentValue(element.name).subscribe((des) => { currentTempForZone = des }); console.log(currentTempForZone); }) } getCurrentValue(eleName){ let roomObj = this.getRoomObj(eleName); let equipRef = roomObj.map(equip => equip.entities.filter(entity => entity.entities.length > 0)[0])[0]; return this.helperService.getPointIdbyTags(this.buildings, ['current',

2021-12-05 06:37:19    分类:技术分享    angular   rxjs   observable   rxjs6

管道后订阅时,Rxjs catchError 不起作用(Rxjs catchError not working when subscribe after pipe)

问题 我创建了一个 observable 来使用 API 可观察:- return this.http.post('/api/ApplicationUser/Login', loginDetails, httpOptions).pipe( map((result: any) => { localStorage.setItem('jwtToken', result.jwtToken); localStorage.setItem('refreshToken', result.refreshToken.value) localStorage.setItem('UserName', result.userName); return result; }), catchError((err: any) => { //this.userLogout() console.log('refresh error') return throwError(err); }) ); } 当我使用以下代码激活时,根据我的情况,上面的代码可以通过结果或抛出错误正常工作:- this.loginService.getNewRefreshToken().subscribe( (res => { console.log(res) }), (err => { this.loginService.userLogout()

2021-12-05 06:20:06    分类:技术分享    angular   rxjs   angular7

将单个订阅变量与 BehaviorSubject 一起使用(Using a single subscription variable with BehaviorSubject)

问题 我在我的Angular应用程序中使用了BehaviorSubject ,我可以从DataService观察到我的Details组件,如下所示: 数据服务.ts: export class DataService { private messageTracker = new BehaviorSubject<any>(); private fileTracker = new BehaviorSubject<any>(); getMessageTracker(): Observable<any> { return this.messageTracker.asObservable(); } getFileTracker(): Observable<any> { return this.fileTracker.asObservable(); } //set methods omitted for brevity } 细节组件: export class DetailComponent implements OnInit { subscription; //??? Can I use this variable for every subscription below? constructor(private dataService: DataService) { } ngOnInit(

2021-12-05 05:35:09    分类:技术分享    angular   typescript   rxjs   behaviorsubject

使用 Subject next() 调用 observables 不起作用(Invoking observables with Subject next() not working)

问题 为什么这个功能只工作一次? 我点击一个按钮来调用主题队列上的 next() ,它可以工作,但如果我点击另一个按钮,它就不起作用。 getData(text): Observable<string> { const timer$ = timer(2000); const observable = new Observable<string>(observer => { timer$.pipe( map(() => { observer.next('http response ' + text); }) ).subscribe(); }); return observable; } 我设置了一个主题并使用 next() 这应该使可观察的发射数据。 queue = new Subject(); streamA$: Observable<string>; streamB$: Observable<string>; images$: Observable<string>; constructor(private timerService: TimerService) { } ngOnInit() { this.streamA$ = this.timerService.getData('a'); this.streamB$ = this.timerService.getData('b')

2021-12-05 05:31:05    分类:技术分享    rxjs

我是否需要在 ngOnDestroy 中使用 `complete()` takeUntil Subject?(Do I need to `complete()` takeUntil Subject inside ngOnDestroy?)

问题 为了避免组件内部的 Observable 内存泄漏,我在订阅 Observable 之前使用了takeUntil()运算符。 我在我的组件中写了这样的东西: private unsubscribe$ = new Subject(); ngOnInit(): void { this.http .get('test') .pipe(takeUntil(this.unsubscribe$)) .subscribe((x) => console.log(x)); } ngOnDestroy(): void { this.unsubscribe$.next(); this.unsubscribe$.complete(); // <--- ?? } 最后我的问题如下: 我需要写this.unsubscribe$.complete(); 还是next()就够了? unsubscribe$是否会在没有完成的情况下被垃圾收集器抓取? 请解释是否存在差异或无关紧要。 我不希望我的组件出现内存泄漏。 回答1 简短的回答,不,这不是必需的,但也无妨。 长答案: 只有在阻止垃圾收集时才需要取消订阅/完成 angular ,因为订阅涉及某些主题,该主题将因收集而比组件寿命更长。 这就是内存泄漏的产生方式。 如果我有服务: export class MyService { mySubject = new

2021-12-05 04:40:58    分类:技术分享    angular   typescript   rxjs   rxjs6

如何以角度递归执行 HTTP 请求?(How to recursively perform an HTTP request in angular?)

问题 我需要向一个端点发出一个 get 请求,该端点包含一个帖子列表和一个总帖子的键。 { posts: [{}, {}, {}, ...], total: 1000 } 请求的偏移键决定了帖子返回的数量。 // request https://postBalzer.com/posts?offset=0&limit=50 此请求返回 0 - 50 之间的帖子 如何使调用递归,直到使用 Angular HttpClientModule 获取所有帖子。 在这种情况下如何使用 expand rxjs 运算符? 回答1 这可以在 rxjs 中通过使用expand运算符来完成,如下所示: import {HttpParams} from '@angular/common/http'; import {Observable, empty} from 'rxjs'; import {expand, map, reduce} from 'rxjs/operators'; export interface PostResponse { posts: object[]; total: number; } @Injectable() export class Service { private readonly baseUrl = '...'; constructor(private http

2021-12-05 04:19:01    分类:技术分享    angular   recursion   rxjs   angular-httpclient

如何根据另一个 Observable 重置 RXJS 扫描运算符(How to reset a RXJS scan operator based on another Observable)

问题 我有一个组件,它在呈现虚拟列表中的最后一个项目时触发onScrollEnd事件。 此事件将执行新的 API 请求以获取下一页并使用scan运算符将它们与先前的结果合并。 该组件还有一个搜索字段,用于触发onSearch事件。 触发搜索事件时,如何清除scan操作员之前累积的结果? 或者我需要在这里重构我的逻辑吗? const loading$ = new BehaviorSubject(false); const offset$ = new BehaviorSubject(0); const search$ = new BehaviorSubject(null); const options$: Observable<any[]> = merge(offset$, search$).pipe( // 1. Start the loading indicator. tap(() => loading$.next(true)), // 2. Fetch new items based on the offset. switchMap(([offset, searchterm]) => userService.getUsers(offset, searchterm)), // 3. Stop the loading indicator. tap(() => loading$

2021-12-05 03:29:21    分类:技术分享    javascript   angular   typescript   rxjs   rxjs-pipeable-operators