RxJS subscribe弃用迁移新写法时值为undefined如何解决

你迁移subscribe新写法时存在两个核心错误：

• 错误使用of操作符包裹this.bookService.getBooks()返回的HTTP请求Observable：of会将传入的参数直接作为next值抛出，不会触发传入的Observable本身的执行，也就根本不会发起实际的图书查询请求，自然拿不到接口返回的真实数据。
• 回调内取值逻辑错误：接口返回的是Book[]类型的数组，你在next回调里读取value.text属性，但数组本身不存在text字段，打印结果必然是undefined。

RxJS 并未弃用subscribe方法本身，只是弃用了「依次传入next、error、complete三个独立回调作为参数」的旧调用方式，新标准是传入一个包含三个回调属性的Observer对象作为唯一入参，不需要额外用操作符包装原有请求Observable，正确写法如下：

public books: Book[] | undefined;

constructor(private bookService: BookService) {}

ngOnInit() { this.getBooks(); }

public getBooks(): void {
  // 直接订阅服务返回的请求Observable，传入Observer配置对象
  this.bookService.getBooks().subscribe({
    next: (response: Book[]) => {
      this.books = response;
      console.info("获取到的图书数据：", response);
    },
    error: (error: HttpErrorResponse) => {
      alert(error.message);
    },
    complete: () => {
      console.info('请求执行完成');
    }
  });
}

对应的Book接口定义保持不变即可：

export interface Book{
  title: string;
  author: string;
}

• 不要随意用of等创建类操作符包装单个已有的HTTP请求Observable，除非你明确知道操作符的作用，否则会阻断原有请求的执行逻辑。
• 新写法的类型推断会自动根据上游Observable的类型匹配回调参数类型，不需要手动将value指定为any类型，否则会丢失TS的类型校验能力。

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