angular 路由守卫异步请求串联 async await

最新推荐文章于 2022-11-03 15:31:32 发布

原创

最新推荐文章于 2022-11-03 15:31:32 发布 · 856 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了在Angular路由守卫中如何优雅地处理异步请求串联。通过使用async和await关键字，可以避免嵌套请求的复杂性，使得代码更加清晰。文章详细阐述了如何在请求request1成功并获取数据后，再发起request2，并最终依据两个请求的结果来判断是否允许路由访问。

假设路由守卫的这种场景

1.需要请求request1，拿到request1返回的数据后，才能去请求request2

2.最后根据request1和request2的结果决定是否能访问

有种做法是正常嵌套请求，路由守卫保存当前url，先返回false，等2个请求回来之后再跳转回那个url，就是嵌套层级如果多会不好看。比较好的做法是使用async和await

使用async await

export class TwoGuard implements CanActivate {
  constructor(private router: Router) { }
  async canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Promise<boolean | UrlTree> {
    const r1 = await this.request1();
    const r2 = await this.request2();
    console.log(r1);
    console.log(r2);
    if (r1 && r2) {
      return true;
    } else {
      return this.router.parseUrl('/user/deny');
    }
  }

  request1(): Promise<boolean> {
    return new Promise((resolve, reject) => {