Angular多HTTP请求场景：先取OAuth令牌再调后端接口实现是否正确？

• tap 操作符不会触发第二个请求执行：Angular HttpClient 返回的是冷 Observable，只有被订阅才会发起请求。你在 tap 中写的 this.http.post("/api/list") 没有被订阅，运行时根本不会发起接口请求。tap 仅适合做日志、缓存这类无返回的副作用操作，不适合处理嵌套 HTTP 请求。
• 第二个请求的请求体传参错误：你给 /api/list 接口传的 body 还是获取令牌用的 URLSearchParams 对象，既不符合你定义的 application/json 请求头要求，也完全不是列表接口需要的业务参数。
• 方法返回值不符合预期：当前方法返回的是获取令牌接口的响应流，调用方订阅后拿到的只有令牌信息，拿不到 /api/list 接口的返回结果。

用 switchMap 操作符替换 tap，把第一个请求的结果映射为第二个请求的流，这样调用方订阅后会依次执行两个请求，最终拿到列表接口的返回：

import { switchMap } from 'rxjs';

// 服务类方法
myFunction() {
    // 构造获取令牌的请求参数
    const params = new URLSearchParams();
    params.append('grant_type','password');
    params.append('client_id', "xxx");
    params.append('client_secret', 'yyy');
    params.append('username', 'zzz');
    params.append('password', 'aaa');

    const headers = new HttpHeaders({
      'Content-type': 'application/x-www-form-urlencoded; charset=utf-8'
    });

    return this.http.post('http://localhost:8888/auth/realms/mytestrealm/protocol/openid-connect/token',
      params.toString(), { headers: headers })
      .pipe(
        // 用switchMap映射第二个请求
        switchMap((tokenRes: any) => {
          const headers2 = new HttpHeaders({
            'Content-type': 'application/json',
            'Authorization': 'Bearer ' + tokenRes.access_token
          });
          // 这里替换成你实际要传给列表接口的业务参数
          const listReqParams = {
            page: 1,
            size: 10
            // 补充其他业务参数
          };
          return this.http.post("/api/list", listReqParams, {headers: headers2})
        })
      )
}

调用侧不需要修改，正常订阅即可拿到 /api/list 接口的返回结果。

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