Angular 5：链式处理依赖REST调用并向组件返回Observable

嘿，我看你已经搭好了依赖REST调用的基础框架，这就帮你完善成符合需求的实现——既能把每个调用的结果存在服务里，又能返回Observable让组件处理异常。

先给你完整的代码实现，我会逐段解释关键部分：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { switchMap, tap } from 'rxjs/operators';

// 先定义好你用到的类型（根据实际业务调整）
interface AuthClient {
  id: string;
  // 其他客户端相关字段
}

interface AuthAccess {
  token: string;
  expiresAt: Date;
  // 其他授权返回字段
}

@Injectable({ providedIn: 'root' })
export class AuthService {
  // 用私有属性存储两个调用的结果
  private authClient: AuthClient | null = null;
  private authAccessResult: AuthAccess | null = null;

  constructor(private http: HttpClient) {}

  login(username: string, password: string): Observable<AuthAccess> {
    return this.getAuthClient().pipe(
      // 存储第一个调用的结果到服务属性
      tap(response => {
        this.authClient = response.body;
        console.log('已存储AuthClient:', this.authClient);
      }),
      // 用switchMap衔接第二个依赖调用（替代flatMap更适合登录场景）
      switchMap(() => this.authenticate(username, password)),
      // 存储第二个调用的结果到服务属性
      tap(authResult => {
        this.authAccessResult = authResult;
        console.log('已存储授权结果:', this.authAccessResult);
      })
    );
  }

  // 封装第一个REST调用：获取AuthClient
  private getAuthClient(): Observable<{ body: AuthClient }> {
    // 替换成你的实际API地址和请求配置
    return this.http.get<{ body: AuthClient }>('/api/auth/client');
  }

  // 封装第二个REST调用：基于AuthClient完成认证
  private authenticate(username: string, password: string): Observable<AuthAccess> {
    // 这里直接用服务里存储的authClient来构建请求参数
    const authRequest = {
      username,
      password,
      clientIdentifier: this.authClient?.id
    };

    // 替换成你的实际认证API地址和请求配置
    return this.http.post<AuthAccess>('/api/auth/login', authRequest);
  }
}

关键细节说明： #

• 存储调用结果：用RxJS的tap操作符完美解决——它不会修改流里的数据，只会在数据传递过程中执行「存储结果」这种副作用操作，完全符合你的需求。
• 依赖调用衔接：我把flatMap换成了switchMap，如果用户快速多次点击登录，switchMap会自动取消之前未完成的请求，只保留最后一次，更贴合登录这类场景的实际需求；如果你的业务需要保留所有请求，再换回flatMap就行。
• 异常处理：返回的Observable会把两个调用中任何一步的错误都传递给组件，组件只需要在订阅时处理error回调即可，比如：

// 组件里的调用示例
this.authService.login('myUsername', 'myPassword').subscribe({
  next: (result) => {
    // 登录成功后的逻辑，比如跳转到首页
    this.router.navigate(['/dashboard']);
  },
  error: (error) => {
    // 处理任何异常：比如第一个调用失败、第二个调用失败、网络错误等
    this.errorMessage = `登录失败：${error.message}`;
    // 显示错误提示给用户
  }
});

额外建议： #

• 如果你的getAuthClient接口返回的直接是AuthClient对象（不是包含body的结构），记得把tap里的response.body改成response。
• 记得在用户登出时清空服务里存储的authClient和authAccessResult，避免状态混乱。

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