gpt4 book ai didi

Using switchMap to trigger repeated HTTP requests on state changes(使用SwitchMap在状态更改时触发重复的HTTP请求)

转载 作者:bug小助手 更新时间:2023-10-25 10:40:13 27 4
gpt4 key购买 nike



I'm working on an Angular project where I'm trying to trigger an HTTP request every time the state of a hot observable changes and subscribe to all of these changes using the switchMap operator. However, I'm facing an issue where the HTTP request is only triggered once. After the first request, the observable keeps returning the same value without making additional HTTP requests.

我正在进行一个角度项目,其中我尝试在每次可观察到的热点状态发生变化时触发一个HTTP请求,并使用SwitchMap操作符订阅所有这些变化。然而,我面临的问题是,HTTP请求只被触发一次。在第一个请求之后,可观察对象继续返回相同的值,而不会发出额外的HTTP请求。


Here's a simplified example of what I'm trying to achieve:

以下是我试图实现的一个简化示例:


  httpClient = inject(HttpClient);
stateChanges = interval(1000);

ngOnInit() {
this.getResponse$().subscribe((response) => console.log(response));
}

getResponse$(): Observable<any> {
return this.stateChanges
.pipe(
mergeMap(newState => this.httpClient.get('https://jsonplaceholder.typicode.com/todos/1'))
)
}

Is there's a way to force the HTTP request to be sent every time, or is there something I'm doing wrong in my code?

有没有办法强制每次都发送HTTP请求,或者我的代码中有什么地方做错了吗?


更多回答

The sample code you're sharing does send the http request every 1000ms.

您共享的样例代码确实每1000ms发送一次http请求。

there could be some kind of pragrammatic cache interceptors which do the caching logic for you, or maybe your query is returned with cache headers and browser caches and reuses the response

可能有某种可编程的缓存拦截器为您执行缓存逻辑,或者可能返回带有缓存头和浏览器缓存的查询并重用响应

优秀答案推荐

Because switchMap only switches to a new inner observable when the outer observable (stateChanges) emits a new value, the problem you're experiencing, where the HTTP request is only initiated once, is caused by this. StateChanges is a hot observable in your code that emits values every second and was generated by interval(1000). SwitchMap, which is still subscribed to the initial inner observable because it's a continuous stream of values, does not, however, re-trigger the HTTP request because of this.

由于SwitchMap仅在外部可观测变量(StateChanges)发出新值时才切换到新的内部可观测变量,因此您遇到的问题(即HTTP请求仅启动一次)就是由此引起的。StateChanges是代码中的一个热门对象,它每秒发送值,由Interval(1000)生成。SwitchMap仍然订阅初始的内部可观察对象,因为它是一个连续的值流,但是,它不会因此重新触发HTTP请求。


The switchMap operator should be used in conjunction with a subject or source observable that emits new values when the HTTP request is to be triggered in order to accomplish your purpose. Here is an updated illustration:

为了实现您的目的,SwitchMap操作符应该与当要触发HTTP请求时发出新值的主题或源可观察对象结合使用。以下是更新后的插图:


import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, Subject } from 'rxjs';
import { switchMap } from 'rxjs/operators';

@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
httpClient: HttpClient;
stateChanges = new Subject<void>();

constructor(private http: HttpClient) {
this.httpClient = http;
}

ngOnInit() {
this.getResponse$().subscribe((response) => console.log(response));
}

triggerRequest() {
this.stateChanges.next();
}

getResponse$(): Observable<any> {
return this.stateChanges.pipe(
switchMap(() =>

this.httpClient.get('https://jsonplaceholder.typicode.com/todos/1'))
);
}
}

Hope, It helps. you can ask any questions If you face any.

霍普,这很有帮助。如果你面对任何问题,你可以问任何问题。


更多回答

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com