Question

我想在HttpClient请求上附加两个管道，这些管道将在请求开始时以及请求完成时执行某些功能。到目前为止，我已经找到“ finalize”运算符以在请求完成时执行功能，但是找不到与请求启动等效的函数。

到目前为止，我的代码：

this.http.get<MyModel>('api/model')
    .pipe(
      // TODO missing something for startup
      finalize(() => console.log('on start'))
    )
    .subscribe(result => {
      console.log(result);
    });

如何获得此结果？ RxJS中是否有任何内置运算符，还是我应该编写自己的运算符？也许还有其他选择？

Answer 1

编辑：我找到了一个更好的，鲜为人知的解决方案。有一个defer可观察的创建函数，而不是运算符。

可以这样使用：

defer(() => {
    console.log('on start');
    return this.http.get<MyModel>('api/model').pipe(
        finalize(() => console.log('on finish'))
    )
}).subscribe(result => {
    console.log(result);
});

最好的是，它在一个闭包中捕获了HttpClient，您可以在不订阅它的情况下传递此Observable。

startWith是您可以获得的最接近的运算符。不过，它必须与http结果的类型匹配。

Answer 2

基于带有startWith运算符的@TomaszBłachut提议。它需要一些技巧，但可以正常工作。

想法是将startWith运算符与立即调用的函数配合使用，该函数将执行我想要的操作并返回null。比我们添加skip（1）可以避免订阅中出现此null。

它按预期工作。最终代码：

this.http.get<MyModel>('api/model')
    .pipe(
      startWith((() => {
        console.log('on start');
        return null;
      })()),
      skip(1),
      finalize(() => console.log('on end'))
    )
    .subscribe(result => {
      console.log(result);
    });

Answer 3

在请求开始时就可以在请求之前，您不需要任何运算符：

console.log('starting');
this.http.get('').pipe(finalize(() => console.log('endeing')));

可观察的“启动”管道

3 个答案: