主页 / coding / 问题 / 76969193
Accepted
parliament
Asked: 2023-08-24 20:18:20 +0800 CST

RxJS 设置请求的最小延迟

  • 772

我想在我的应用程序中发出请求时显示加载程序。但有时我的服务器响应太快，加载器只是闪烁一瞬间，导致不愉快的体验。

过去我一直做的是使用combineLatestatimer来创建最小的请求延迟。

const request = getRequestPromise();
await lastValueFrom(combineLatest([request, timer(1000)]).pipe(mapRx(([x]) => x)))

其作用是，如果服务器在不到一秒内响应，则只需在解析之前等待 1 秒即可。然而，如果服务器在 3 秒内响应，则此代码不会增加额外的一秒。

这一直很有效。但我刚刚意识到，如果请求失败（导致异常），它不会遵守最小延迟。它会立即解决并导致令人不快的加载器闪烁。

我如何才能同时处理失败和成功的请求？

我仍然需要能够处理请求本身的成功/错误：

await lastValueFrom(combineLatest([request, timer(1000)])     
  .pipe(mapRx(([x]) => x)))
  .then(() => console.log('handle successful request'))
  .catch(() => console.log('handle error'))
rxjs

2 个回答

  1. Best Answer

    您可以为此使用materialize和dematerialize，这样第一个流就不会出现错误，并且只有在combineLatest被解析并且您从请求返回值后，您才将其dematerialize，因此如果出现错误，它会抛出正如预期：

    combineLatest([request.pipe(materialize()), timer(1000)]).pipe(
  map(([x]) => x),
  dematerialize()
);
    • 3

  2. 我认为你可以用 Observable 包装request（我认为这是一个承诺）并from使用catchError()运算符，以便错误通知不再传播。

    await lastValueFrom(
 combineLatest(
  [
   // Send the caught error as a 'next' notification.
   from(request).pipe(catchError(err => of(err))),
   timer(1000)
  ]
 )     
  .pipe(mapRx(([x]) => x)))
  .then(() => console.log('handle successful request'))
  .catch(() => console.log('handle error'))
    • 0

相关问题