Angular中切换路由时取消所有未完成的http请求

场景： 在日常开发过程中，可能因为这样或者那样的原因，会导致在切换路由时，发出的网络请求还没有完成，这样会带来一些不好的影响

解决思路

1. 判断切换路由的时机

2. 当路由切换完成后，取消未完成的所有请求

实现步骤

1. 创建取消请求的服务 ng g s service/cancel-http --skip-tests

   // cancel-http.service.ts
   
    @Injectable({
      providedIn: 'root'
    })
    export class CancelHttpService {
   
      public cancelPenddingRequest$ = new Subject<void>();
   
      constructor() { }
   
      public cancelPendingRequests(): void {
        this.cancelPenddingRequest$.next();
      }
   
      public onCancelPendingRequests(): Observable<void> {
        return this.cancelPenddingRequest$.asObservable();
      }
    }
   

2. 创建拦截器ng g interceptor cancel-request

      // cancel-request.interceptor.ts
   
       export class HttpCancelInterceptor implements HttpInterceptor {
   
         constructor(private cancelHttpService: CancelHttpService) { }
   
         intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
           return next.handle(request).pipe(tap(evt => console.log(evt)), takeUntil(this.cancelHttpService.onCancelPendingRequests()))
         }
       }
   
      ```
   
   

3. 根组件监听路由事件，依据事件判断切换时机取消请求

       // app.component.ts
   
       @Component({
         selector: 'app-root',
         templateUrl: './app.component.html',
         styleUrls: ['./app.component.scss']
       })
       export class AppComponent {
   
         constructor(private router: Router, private cancelService: CancelHttpService) {
           this.router.events.subscribe(event => {
             if (event instanceof ActivationEnd) {
               this.cancelService.cancelPendingRequests()
             }
           })
         }
       }