RxJS forkJoin 处理路由解析错误

Question

我似乎无法找到一种方法来解决 catch/handle 在尝试进行路由解析时 forkJoin 中的错误。

我已经为帐户页面创建了一个路由解析器，在路由之前它应该 return 2 个请求。现在这是我无法解决的部分：如果用户没有订阅，则从服务器 return 编辑 404。我想处理这个，如果发生这种情况，用户应该被路由到另一个页面，他可以从那里进行订阅。

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { AccountService } from './account.service';

@Injectable()
export class AccountResolver implements Resolve<any> {
    constructor(private accountService: AccountService) { }

    resolve(route: ActivatedRouteSnapshot): Observable<any> {
        return Observable.forkJoin([
            this.accountService.getUser(),
            this.accountService.getUserSubscriptions()
        ]);
    };
}

如何捕获和处理请求 getUserSubscriptions() 时服务器发送的错误 404？

Answer 1

您可以捕获错误，并重定向到所需的路由，如下所示：

@Injectable()
export class AccountResolver implements Resolve<any> {
    constructor(private accountService: AccountService,
                private router: Router) { }

    resolve(route: ActivatedRouteSnapshot): Observable<any> {
        return Observable.forkJoin([
            this.accountService.getUser(),
            this.accountService.getUserSubscriptions()
                .catch(error => {
                    if(error.status === 404) {
                        this.router.navigate(['subscription-create']);
                    }

                    return Observable.throw(error);
                })
        ]);
    };
}

这样，错误得到处理，但也以其原始形状返回到 resolve 方法，因此解析器可以拒绝访问先前的目标路由（[=12= 中任何失败的请求） ] 将导致 forkJoin 本身默认失败）。

Answer 2

这取决于错误发生的位置，这在您的示例中并不完全明显。

如果 getUserSubscriptions() 调用发出错误，那么您需要在将其传递给 forkJoin 之前捕获它，因为其他视图 forkJoin 将重新发出错误。另请注意，forkJoin 要求每个源 Observable 至少发出一个值。这就是为什么我不能使用 Observable.empty() 而我需要使用 Observable.of(null).

return Observable.forkJoin([
    this.accountService.getUser(),
    this.accountService.getUserSubscriptions()
        .catch(err => {
            // Logic based on the err parameter
            return Observable.of(null);
        })
]);

这只会用 null 替换错误，因此您可以在 forkJoin 的订阅者中处理它。

RxJS forkJoin 处理路由解析错误

RxJS forkJoin handle error on route resolve

angular

rxjs

observable

fork-join