Angular中订阅Observable返回undefined的问题求助

核心问题 #

你的getUrl方法在缓存未命中时，没有返回Observable，而是内部订阅了HTTP请求，导致方法默认返回undefined。组件订阅undefined自然会输出undefined。

另外你尝试的switchMap写法也不对——你在服务内部订阅了Observable，但没有把这个Observable作为方法的返回值传递给组件。

修正后的服务代码 #

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

@Injectable({
  providedIn: 'root'
})
export class UrlService { // 类名建议首字母大写，符合TS规范
  private map: Map<string, string> = new Map<string, string>(); // 直接初始化更简洁

  constructor(private http: HttpClient) {}

  public getUrl(id: string): Observable<string> {
    // 先检查缓存
    const cachedUrl = this.map.get(id);
    if (cachedUrl) {
      return of(cachedUrl);
    }

    // 缓存未命中时，返回HTTP请求的Observable，并用tap缓存结果
    return this.http.get<any>(`...sampleURL...`)
      .pipe(
        tap(result => {
          this.map.set(id, result.url);
        }),
        // 映射成需要的url字符串返回给订阅者
        map(result => result.url)
      );
  }
}

关键说明 #

1. 始终返回Observable：不管缓存是否命中，getUrl方法都要返回一个Observable<string>，这样组件才能正确订阅。
2. 用tap处理副作用：tap操作符用于执行缓存这类不修改数据流的副作用，map则负责把HTTP响应转换为需要的url字符串。
3. 避免内部订阅：服务中的HTTP请求不要在内部订阅，而是把Observable返回给组件由调用方订阅，这是RxJS的最佳实践。

组件调用代码（无需修改） #

this.urlService.getUrl(this.id).subscribe(
  url => console.log(url)
);

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