有没有可能在angular应用程序代码中强制进行硬更新（类似于Ctrl + F5浏览器）？

Question

有时我的Angular应用会得到更新。 该应用已经上线，一些常见的使用场景是用户根本不关闭带有应用程序的浏览器选项卡，因此可能永远使用过时的版本而不进行检查。

我已经实现了一个机制，在后端检查应用程序版本，因此拒绝来自过时版本的所有调用。

下一步是在后端拒绝并确认时向用户显示一些“需要更新”的对话框，在这种情况下，最好不要强制用户手动按“Ctrl + F5”，而是从应用程序中自动执行它。

这是否可能？

- Arsenii Fomin

---

当API调用被拒绝时，您可以使用响应拦截器，在响应拦截器部分编写window.reload。 - Yash Rami

@YashRami window.reload是带有缓存清除的硬刷新吗？ - Arsenii Fomin

不，window.reload并不是进行硬刷新，但location.reload(true)则是带有清除缓存的刷新。 - Yash Rami

@YashRami 看起来不错，谢谢！ - Arsenii Fomin

Answer 1

我们需要使用拦截器来检测错误，如果检测到错误，则使用 window.location.reload(true) 重新加载页面，这将清除缓存并重新加载页面。

@Injectable()
export class myInterceptor implements HttpInterceptor {

  constructor() { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError(error => this.handleError(error))
    );
  }

  private handleError(error: HttpErrorResponse): Observable<any> {
     if (error.status === 404) {
      // Do your thing here      
     window.location.reload(true);
   }         
  }

我希望它能够帮助你解决问题。

- Yash Rami

---

如果 handleError 不会中断应用程序工作流并将执行传递到下一个步骤，那么它应该返回什么 Observable？ - Arsenii Fomin

这里有一个问题。看起来catchError完全从下一个处理中删除了错误，而我的应用程序代码也依赖于接收这些错误。在这里处理错误是否可能（以更新应用程序，如果它是某种特定类型的错误），但将其传递给下一个处理程序？ - Arsenii Fomin

看起来我需要返回 next.handle(req).pipe( tap(res => this.handleError(res)) ); - Arsenii Fomin

@ArseniiFomin，我刚刚在handleError中更新了我的答案，你可以像我在答案中展示的那样捕获特定的错误。 - Yash Rami

我发现在我的情况下，我需要在handleError()中使用"return throwError(err);"，这篇很棒的文章帮了我很多忙：https://blog.angular-university.io/rxjs-error-handling/ - Arsenii Fomin