使用 Angular 2 和 rjxs 检查端口上的超时错误

Question

我想在向端口发送请求时检查请求是否超时。我只想在请求超时时打印错误。

myService.service.ts

checkStatus() : Observable<any> {
    return this.http.get<any>('http://127.0.0.1:3001'); // simple example
}

myComponent.ts

this.myService.checkStatus.subscribe(() => {}, 
  (err) => {
     // if the timeout error is print error
  }
}

我只想在修复超时错误时从屏幕上删除错误。如果返回错误 404 或其他错误，我不希望执行该操作并将其打印到屏幕上。

简而言之，如下所示，

1. 将向端口发送请求并检查是否有超时错误。
2. 如果存在超时错误，则会在屏幕上打印错误。（404或不同的错误不会打印，仅打印超时错误）
3. 如果存在超时错误，将检查错误是否仍然存在，如果错误继续存在如果没有发生，屏幕上的文本将被删除。

Answer 1

使用 retryWhen 以一定的时间间隔检查超时错误，这里是一个内部可观察值，外部可观察值仅用于为 ui

myService.service.ts

  checkStatus() : Observable<any> {
    return Observable.create((observer) => {
      this.http
        .get<any>('http://127.0.0.1:3001')
        .pipe(
          map(() => {
            // Success case...
            observer.next(null);
          }),
          retryWhen((err) => {
            return err.pipe(
              switchMap((err, i) => {
                
                // If it is a time out error,
                // then emit message to display
                // and set next retry attempt
                // by returning timer observable
               
                if(err.status === 504){
                   observer.next("timeout error!");
                   return timer(2000);
                }
                // If it's not a timeout error
                // then return null or anything you want
                // On basis of what you can remove message 
                // from ui

                observer.next(null);
                
                // Terminating retry...
                throwError(() => 'It's not a timeout error!');
              })
            );
          }),
          catchError((err) => {
            return throwError(err);
          })
        )
        .subscribe(console.log);
    });
  }

myComponent 发出消息.ts

this.myService.checkStatus.subscribe(
  (res) => {
     // if the timeout error is print error
  }, 
  (err) => {
    
  }
}

Answer 2

你可以做这样的事情来捕获你的错误。

this.myService.checkStatus
  .pipe(
     catchError(error) => // do something with it)
   )
  .subscribe(yourResponse => // handle your response)