typescript 订阅observable returns undefined

ojsjcaue  于 2023-04-13  发布在  TypeScript
关注(0)|答案(1)|浏览(121)

所以我有一个服务,它使用字典来存储HTTP响应(将IDMap到特定的URL)。

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

@Injectable({
  providedIn: 'root'
})
export class urlService {
  private map: Map<string, string>;

  constructor(private http: HttpClient) {
    this.map = new Map<string, string>();
  }

  public getUrl(id: string): Observable<string> {
    if (this.map.has(id)) {
      return of(this.map.get(id));
    }

    this.http.get<any>(`...sampleURL...`)
    .subscribe((result) => {
      this.map.set(id, result.url);
      return of(this.map.get(id));
    });
  }
}

但是,当我尝试从应用组件获取此url时,记录的值为undefined

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

我想这是因为在urlService.getUrl()中我有一个返回Observable的订阅。有人能告诉我解决这个问题的正确方向吗?
我尝试使用switchMap,但似乎没有帮助。

this.http.get<any>(`...sampleUrl...}`).pipe(
  switchMap(result => {
    this.map.set(id, result.url);
    return of(this.map.get(id));
  }))
.subscribe();
eimct9ow

eimct9ow1#

当前getUrl方法返回的Observable不正确。它没有任何返回值,因此返回undefined
相反,您应该使用map rxjs运算符返回Observable

import { map } from 'rxjs';

public getUrl(id: string): Observable<string> {
  if (this.map.has(id)) {
    return of(this.map.get(id));
  }

  return this.http.get<any>(`...sampleURL...`)
      .pipe(
        map((result) => {
          this.map.set(id, result.url);

          return this.map.get(id); 
          // Or 
          // return result.url; 
        })
      );
}

Demo @ StackBlitz

相关问题