如何捕获Angular中http.get()请求抛出的错误？

你用try/catch无法捕获this.http.get()的错误，是因为HTTP请求返回的是RxJS Observable异步流，流内的错误不会被同步的try/catch捕获，必须用RxJS的catchError操作符来处理。

步骤1：导入必要的RxJS操作符 #

首先在认证服务文件顶部导入所需操作符：

import { catchError, map } from 'rxjs/operators';
import { throwError } from 'rxjs';

步骤2：修改代码添加错误处理 #

在pipe()中加入catchError操作符，放在map之后，用于捕获请求错误并处理：

return this.http
  .get<any>(`${environment().apiUrl}/auth/refresh`, {
    headers: { Authorization: `Bearer ${this.userValue?.refreshToken}` },
  })
  .pipe(
    map((data) => {
      // 移除原代码中的async，map不需要异步（如果parseAndReturnUser是同步方法）
      let user = this.parseAndReturnUser(data);
      user.refreshToken = this.userValue?.refreshToken;
      this.userSubject.next(user);
      this.startRefreshTokenTimer();
      return data;
    }),
    catchError((error) => {
      // 编写你的错误处理逻辑
      console.error('刷新令牌请求失败:', error);

      // 示例：如果是401未授权，清除用户状态
      if (error.status === 401) {
        this.userSubject.next(null);
        this.stopRefreshTokenTimer(); // 假设你有对应的停止定时器方法
      }

      // 重新抛出错误，让订阅该Observable的地方也能捕获处理
      return throwError(() => error);
    })
  );

关键注意事项 #

• 如果parseAndReturnUser是异步方法（返回Promise），不要用map(async...)，换成switchMap：

switchMap(async (data) => {
  let user = await this.parseAndReturnUser(data);
  user.refreshToken = this.userValue?.refreshToken;
  this.userSubject.next(user);
  this.startRefreshTokenTimer();
  return data;
})

• 你也可以在订阅这个方法时，添加额外的订阅层面错误处理：

this.authService.refreshToken().subscribe({
  next: (res) => { /* 处理成功响应 */ },
  error: (err) => { /* 订阅时的错误处理 */ }
});

内容的提问来源于stack exchange，提问作者sirzento