如何解决确保在发出网络请求之前先发出另一个Observable,但是将响应作为冷的Observable通过重播提供给使用者
我要实现的目标:
我有一个FeaturesService
,如果通过提供不同的Promises
启用了某些功能,则应该提供信息。
启用的功能列表通过HTTP API作为json对象提供(请参见DataService
)。
在发送获取功能列表的HTTP请求之前,我们需要确保首先对用户进行身份验证(请参阅AuthService
)。
此外:
- 仅当某人使用
Promises
提供的FeaturesService
(例如isFeatureXSupported
)之一时才发出功能请求,而不必在应用程序启动时或尽快当用户通过身份验证时。 (冷可观察?) - HTTP请求的功能只能访问网络一次,之后应进行缓存(重播)
到目前为止,我想出了什么:
import { Subject,Observable,ReplaySubject } from "rxjs";
import { map,shareReplay,switchMap,take } from "rxjs/operators";
import { Container,injectable } from "inversify";
import "reflect-metadata";
interface DtoFeatures {
supportedFeatures: string[];
}
@injectable()
class AuthService {
private authenticated$: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
public authenticate(): void {
// Mock code
console.log("Authenticate Request (Mock) started");
setTimeout(() => {
console.log("Authenticate Request (Mock) finished");
this.authenticated$.next(true);
},100);
}
public isAuthenticated(): Observable<boolean> {
return this.authenticated$.asObservable();
}
}
@injectable()
class DataService {
public getFeatures(): Observable<DtoFeatures> {
// Mock Code,real HTTP Request happening instead that needs to be authorized
console.log("Network Request (Mock) started");
const features$ = new Subject<DtoFeatures>();
setTimeout(() => {
console.log("Network Request (Mock) finished");
features$.next({ supportedFeatures: ["featureX"] });
features$.complete();
},150);
return features$;
}
}
@injectable()
class FeaturesService {
// private readonly dtoFeatures: Observable<DtoFeatures> = this.authService.isAuthenticated().pipe(
// take(1),// switchMap(() => this.dataService.getFeatures()),// shareReplay(1)
// );
private readonly dtoFeatures: Observable<DtoFeatures> = this.dataService.getFeatures().pipe(
shareReplay(1)
);
constructor(
private authService: AuthService,private dataService: DataService
) {}
public supportedFeatures: Promise<string[]> = this.dtoFeatures.pipe(
map((features) => features.supportedFeatures)
).toPromise();
public isFeatureXSupported: Promise<boolean> = this.supportedFeatures.then(
(features) => features.some((x) => x === "featureX")
);
public isFeatureYSupported: Promise<boolean> = this.supportedFeatures.then(
(features) => features.some((x) => x === "featureY")
);
}
@injectable()
class App {
constructor(
private authService: AuthService,private featureService: FeaturesService
) {
console.log("App initialized");
this.authService.authenticate();
this.featureService.isFeatureXSupported.then((x) => console.log(`FeatureX enabled: ${x}`));
}
}
// Configure DI
var container = new Container();
container.bind<AuthService>(AuthService).toSelf();
container.bind<DataService>(DataService).toSelf();
container.bind<FeaturesService>(FeaturesService).toSelf();
container.bind<App>(App).toSelf();
// Initialize App
container.resolve(App);
链接到代码框: https://codesandbox.io/s/youthful-cerf-t43mi?file=/src/index.ts
给定的代码涵盖了大多数要求,除了问题外,功能请求是在验证用户之前完成的。
控制台日志:
>Network Request (Mock) started <-- Problem!
>App initialized
>Authenticate Request (Mock) started
>Authenticate Request (Mock) finished
>Network Request (Mock) finished
>FeatureX enabled: true
因此,我尝试使用此版本,但随后根本没有功能请求:
class FeaturesService {
private readonly dtoFeatures: Observable<DtoFeatures> = this.authService.isAuthenticated().pipe(
take(1),switchMap(() => this.dataService.getFeatures()),shareReplay(1)
);
// private readonly dtoFeatures: Observable<DtoFeatures> = this.dataService.getFeatures().pipe(
// shareReplay(1)
// );
...
}
控制台日志:
>App initialized
>Authenticate Request (Mock) started
>Authenticate Request (Mock) finished
我想我在这里混淆了与冷/热可观察物有关的东西,但我无法弄清楚问题所在。我非常感谢您的帮助,我认为这是rxjs
/ reactive programming
的一个很好的现实用例,所以也许其他人也想知道如何实现它。
解决方法
谢谢fridoo!
第一个问题是错误的DI配置,您需要使用.inRequestScope()
或在注册服务时使用.inSingletonScope()
,例如:
container.bind<AuthService>(AuthService).toSelf().inRequestScope();
第二个问题是在.toPromise()
中使用FeaturesService
。即使没有要素服务的使用者,这也导致了网络请求的完成。
通过按可预期的方式一直使用Observables。消费者想要使用异步/等待时也可以使用.toPromise()
。
完整代码示例:
import { Subject,Observable,ReplaySubject } from "rxjs";
import { map,shareReplay,switchMap,take } from "rxjs/operators";
import { Container,injectable } from "inversify";
import "reflect-metadata";
interface DtoFeatures {
supportedFeatures: string[];
}
@injectable()
class AuthService {
private authenticated$: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
public authenticate(): void {
// Mock code
console.log("Authenticate Request (Mock) started");
setTimeout(() => {
console.log("Authenticate Request (Mock) finished");
this.authenticated$.next(true);
},100);
}
public isAuthenticated(): Observable<boolean> {
return this.authenticated$.asObservable();
}
}
@injectable()
class DataService {
public getFeatures(): Observable<DtoFeatures> {
// Mock Code,real HTTP Request happening instead that needs to be authorized
console.log("Network Request (Mock) started");
const features$ = new Subject<DtoFeatures>();
setTimeout(() => {
console.log("Network Request (Mock) finished");
features$.next({ supportedFeatures: ["featureX"] });
features$.complete();
},150);
return features$;
}
}
@injectable()
class FeaturesService {
private readonly dtoFeatures: Observable<DtoFeatures> = this.authService.isAuthenticated().pipe(
take(1),switchMap(() => this.dataService.getFeatures()),shareReplay(1)
);
constructor(
private authService: AuthService,private dataService: DataService
) {}
public supportedFeatures: Observable<string[]> = this.dtoFeatures.pipe(
map((features) => features.supportedFeatures)
);
public isFeatureXSupported: Observable<boolean> = this.supportedFeatures.pipe(
map((features) => features.some((x) => x === "featureX"))
);
public isFeatureYSupported: Observable<boolean> = this.supportedFeatures.pipe(
map((features) => features.some((x) => x === "featureY"))
);
}
@injectable()
class App {
constructor(
private authService: AuthService,private featureService: FeaturesService
) {
console.log("App initialized");
this.authService.authenticate();
// Comment this line out,to see that there is no (mocked) network request for features
this.featureService.isFeatureXSupported.subscribe((x) => console.log(`FeatureX enabled: ${x}`));
// Build promise at consumer level:
// this.featureService.isFeatureXSupported.toPromise().then((x) => console.log(`FeatureX enabled: ${x}`));
}
}
// Configure DI
var container = new Container();
container.bind<AuthService>(AuthService).toSelf().inRequestScope();
container.bind<DataService>(DataService).toSelf().inRequestScope();
container.bind<FeaturesService>(FeaturesService).toSelf().inRequestScope();
container.bind<App>(App).toSelf();
// Initialize App
container.resolve(App);
Codesandbox:https://codesandbox.io/s/confident-sammet-z1x2r?file=/src/index.ts
控制台日志(带有使用者):
>App initialized
>Authenticate Request (Mock) started
>Authenticate Request (Mock) finished
>Network Request (Mock) started
>Network Request (Mock) finished
>FeatureX enabled: true
控制台日志(没有使用方):
>App initialized
>Authenticate Request (Mock) started
>Authenticate Request (Mock) finished
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。