为啥订阅在 Angular 中没有 Observable 的情况下工作

Posted 2023-03-13

【中文标题】为啥订阅在 Angular 中没有 Observable 的情况下工作

【英文标题】：Why Subscribe is working without Observable in Angular为什么订阅在 Angular 中没有 Observable 的情况下工作

【发布时间】：2021-04-02 17:19:24

【问题描述】：

我想了解 Angular 和 HttpClient 的一些基础知识。我的代码正在运行，但我不明白如何。我检查了这两个链接：

How to correctly subscribe Angular HttpClient Observable? How to declare Return Types for Functions in TypeScript

我在 YouTube 上看过这个视频：

observable and subscribe in Angular 8 | Angular 8 Tutorial in Hindi

我了解到HttpClient的GET方法的语法是： get(url: string, options: ...): Observable<any>

所以我按照视频中的指示做了。这是我的案例1：

用户服务

...
export class UserService 
  constructor(private _http: HttpClient)  
  getAllUsers() 
    return this._http.get("https://jsonplaceholder.typicode.com/users"):Observable<any>;
  

为什么 VSCode 会抱怨：

“typeof Observable”类型的值不可调用。您的意思是包含“新”吗？

事实上，如果我根本没有指定Observable，我的代码就可以完美运行。这是案例2：

...
export class UserService 
  constructor(private _http: HttpClient)  
  getAllUsers() 
    return this._http.get("https://jsonplaceholder.typicode.com/users");
  

这是我的组件（对于这两种情况）：

用户列表

  users=[];

  constructor(private userService: UserService)  

  ngOnInit()   
    this.fetchAllUsers();  
  

  fetchAllUsers() 
    this.userService.getAllEUsers().subscribe(
      res => 
        this.users.push(res)
      
    );    
  

请指出我在这两种情况下的错误。我想我在某处违反了 Angular 规则。

PS：youtube 教程截图：

【问题讨论】：

return this._http.get("..."):Observable<any>; -- 这是一个无效的语法。你能再检查一下实际的代码是什么吗？

@31piy，本教程不包含代码。但我已经添加了屏幕截图。

【参考方案1】：

以下行是您代码中的无效语句：

return this._http.get("https://jsonplaceholder.typicode.com/users"):Observable<any>;

我认为您试图在这里为方法指定返回值，在这种情况下，您需要像这样更改方法声明：

getAllUsers(): Observable<any> 
  return this._http.get("https://jsonplaceholder.typicode.com/users");

您可能想参加 TypeScript 进修课程 here。

【讨论】：

我也在问题中添加了屏幕截图。刚才我加了。我被告知要遵循同样的原则。

当我在任何地方都没有指定 Observable 时它是如何工作的？

您需要了解声明和实现之间的区别。屏幕截图描述了方法声明。另外，http.get 的默认返回类型是Observable<any>，所以不给方法添加返回类型也没什么区别。

@Tanzeel -- 我在答案中添加了一个 TS 文档链接。在开始学习 Angular 之前，您可能想先了解更多关于 TS 的信息。

这确实很有帮助。