使用 async/await 捕获错误的正确方法

Question

我有需要等待每个 HTTP 响应的应用程序。所以调用需要以特定的顺序执行，其中一些需要另一个服务的响应。我认为可以在一个地方捕获错误 - 将传播错误的根/主方法。但它似乎不是那样工作......甚至可能吗？或者这是否意味着我需要在使用 await 的每个方法中使用 try/catch 块？？让我们假设这个伪代码：

user.wrapper.service.ts

// Class which wraps real UserService with HTTP calls
export class UserWrapperService {
   async getUserById(id: number): Promise<UserResponse> {
      return await this.userService.getUser(id).toPromise() as UserResponse;
   }

   async getUserDetails(userName: string): Promise<UserDetailsResponse> {
      return await this.userService.getUserDetails(userName).toPromise() as UserDetailsResponse;
   } 
}

main-component.ts

export class MainComponent implements OnInit {

   async ngOnInit() {
      try {
         await this.retrieveDetailsForEachUser();
      } catch (e) {
        this.router.navigate(['/error']);
      }
   }

   private async retrieveDetailsForEachUser(): Promise<any> {
      for (let counter = 0; counter < 10; counter++) {
         const user = await this.userWrapperService.getUserById(counter);
         console.log(user);
         const details = await this.userWrapperService.getUserDetails(user.name);
         // use this details in another service with bigger method, where is present more async/await
      }
   }
}

我希望如果UserWrapperService 的方法出现问题，错误将在MainComponent 中传播和捕获。或者至少可以以某种方式实现。但似乎我需要抛出异常并尝试/捕获所有async 方法，这些方法是awaiting。我对吗？有没有更漂亮的方法来完成这个？

Answer 1

在使用 async-await 处理错误时，您必须使用 try-catch 块，并且您做得正确。对我来说唯一错误的是，您在返回异步调用结果的同时在服务方法中等待，这将返回一个Promise<Promise<UserResponse>，这不是预期的行为。

修改您的代码以删除服务类中的await 关键字，如下所示，仅在组件类中等待。

user.wrapper.service.ts

export class UserWrapperService {
   async getUserById(id: number): Promise<UserResponse> {
      return this.userService.getUser(id).toPromise();
   }

   async getUserDetails(userName: string): Promise<UserDetailsResponse> {
      return this.userService.getUserDetails(userName).toPromise();
   } 
}

现在您将能够根据主组件类的要求捕获错误、处理错误并导航到错误页面。