这个问题通常发生在使用RxJS的flatMap操作符时,因为它会将上一个请求的响应缓存下来。当参数发生更改并重新执行相同的响应时,服务将返回缓存的响应,而不是新的响应。为解决这个问题,我们可以使用RxJS中的switchMap操作符,它会取消之前的请求并始终返回新的响应。以下是一个代码示例:
import { Component } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { switchMap } from 'rxjs/operators';
@Component({
selector: 'app-root',
template: {{ user | json }}
})
export class AppComponent {
user;
constructor(private http: HttpClient) {}
getUser(userId) {
this.http.get(https://jsonplaceholder.typicode.com/users/${userId}
)
.pipe(switchMap((response) => {
this.user = response;
return this.http.get(https://jsonplaceholder.typicode.com/posts?userId=${userId}
);
}))
.subscribe((response) => {
this.user.posts = response;
})
}
}
在这个示例中,我们使用switchMap操作符来获取更新后的响应。当我们点击按钮获取新用户时,前一个请求被取消,switchMap操作符会返回新的响应,并更新相应的用户信息。