处理 Resolve 服务中的错误

Question

假设我有一个ValuesComponent，它在 HTML 表格中显示Value 的数组。

// in value.ts
export class Value { ... }

// in values.component.ts
@Component(...)
export class ValuesComponent { ... }

作为一个优秀的程序员，我创建了一个不同的类来负责提供值。我们称之为ValuesService。

// in values.service.ts
@Injectable()
export class ValuesService
{
    public getValues(): Observable<Value[]>
    {
       ...
    }
}

假设服务从 Web 服务获取其值：/api/values

现在我不想将服务直接注入到我的组件中，而是让 Angular 路由器在导航到组件之前预取值。

为此，我创建了一个Resolve 服务类并将其插入路由器模块。

// in values-resolver.service.ts
export class ValuesResolverService implements Resolve<Value[]> {
    constructor(private backend: ValuesService) {
    }

    public resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Value[]> {
        return this.backend.getValues();
    }
}

// In app.module.ts (in @NgModule())
imports: [
  RouterModule.forRoot([{
    path: 'values',
    component: ValuesComponent,
    resolve: { values: ValuesResolverService }
  }])
]

// In values.component.ts
public values: Value[];

constructor(private route: ActivatedRoute) {
}

ngOnInit() {
    this.values = route.data.values as Value[];
}

到目前为止我做得怎么样？好的？那么当ValuesService.getValues() 失败时，我应该在哪里进行错误处理？ （连接错误，内部服务器错误，...）

当用户尝试导航到/#/values 路由并发生错误时，我想将错误记录到控制台并停止导航。理想情况下，我想将用户重定向到 /#/error 路由（示例代码中未显示）。

Answer 1

在这种情况下，服务应该处理错误，并重定向到想要的路由。然后，catch 方法应该返回一个空的 Observable（供 resolve 守卫解析），同时在 resolve 期间处理空的情况。

类似的东西

export class ValuesService {
    constructor(private http:Http, private router:Router) {}

    getValue() {
       this.http.get('/some/url').map((response:Response) => {
           // Map your response to a model here
       }).catch((response:Response) => {
           // Handler case for different status
           this.router.navigate(['/error']);
           return Observable.empty();
       })
    }
}

而守卫是这样的

export class ValueResolveGuard implements Resolve<Value[]> {

    constructor(private valueService:ValueService) {}

    resolve() { // You don't need the route & state if you're not gonna use them
        this.valueService.getValue().toPromise().then((values:Values[]) => {
            if (!values) { // For the Observable.empty() case
                // return some default stuff
            }
            return values;
        })
    }
}

或者，如果您想专门返回一个 observable（在这种情况下不应该有任何区别，因为 resolve 守卫同时接受 observable 和 promise），您可以这样做。

 this.valueService.getValue().first().catch({} => { 
      // return some default value.
 });

注意 first() 是必需的，因此返回的 observable 将是一个终止的 observable，否则解析守卫将无法解析。需要 catch 是因为对空的 observable 调用 first() 会引发错误。