在切换到下一个路由之前执行 http 请求

Question

我想在离开页面导航到任何其他路线时执行发布请求。

我尝试过使用：

  this.subscriptionGrade = router.events
      .pipe(filter((event) => event instanceof NavigationStart))
      .pipe(
        concatMap(() => {
          return this.submitScore();
        })
      )
      .subscribe((res) => {
        this.snackBar.openSnackBar("Score submitted", "");
      });


  submitScore() {
    const score = { score: this.scoreForm.get("score").value };
    if (this.scoreForm.get("score").value) {
      return this.learningContentService.gradeAssignment(
        this.selectedAttempt,
        score
      );
    } else {
      return of(null);
    }
  }

这会执行 http 重新请求，但会在从 http 请求收到响应并且请求被取消之前切换到下一个路由。

Answer 1

可以在这条路由上使用canDeactivate，检查http调用是否成功

export interface CanComponentDeactivate {
 canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

...

@Injectable()
class CanDeactivateComponent implements CanDeactivate<CanComponentDeactivate>{
 constructor() {}
 canDeactivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
 let data= route.data.data;
 return this.service.post(url, data)
   .pipe(
     map(response => response.status === 'success'),
     catchError(error => of(false))
   );
 }
}

你的路线

{
 path: 'yourRoute',
 component: Component,
 canActivate: [CanDeactivateComponent ],
 data: { data: {...}}
}