带有 rxjs 错误的相关请求：可观察 _isScalar: false, _subscribe: f

Posted 2023-03-13

【中文标题】带有 rxjs 错误的相关请求：可观察 _isScalar: false, _subscribe: f

【英文标题】：Dependent requests with rxjs error: Observable _isScalar: false, _subscribe: f带有 rxjs 错误的相关请求：可观察 _isScalar: false, _subscribe: f

【发布时间】：2020-03-25 22:08:12

【问题描述】：

我是 Rxjs 的新手(^6.5.3)。我正在使用它为我的反应应用程序从 api 获取数据。 我正在提出两个请求，其中一个依赖于另一个。 我不知道我做错了什么，但我得到了这个错误：

// console ouput
 Observable _isScalar: false, _subscribe: f
 Observable _isScalar: false, _subscribe: f
.....

如何显示结果的示例：

// users endpoint
  
   "data": 
    "total": 130,
    "users": [ // this format is also used as the User interface for typescript type check
        "id": 1, "name": "John Doe", "profile_url": "https://myapi.co/user/id/1",
        "id": 2, "name": "Johny Doe", "profile_url": "https://myapi.co/user/id/2", ...
     ]
  
 


// user details endpoint
  
   "data": 
    "info":"name": "John Doe", "age": 50, "gender": "male", "status": "active", ...
    
 

这是我处理从 api 获取数据的代码

 // User class
class User
.....
   private function getAllUsers(): Observable<User[]> 
     return from(fetch(api.getUsers()).then(res => res.json()).then(res => res.data.users))
   

   private function getUserDetails(url: string): Observable<User> 
     return from(fetch(api.getUserDetails(url)).then(res => res.json()).then(res => res.data.info))
   

   public function getUsers(): Observable<User[]> 

    return this.getAllUsers()
      .map(users => users.map(user => user.profile_url))
      .flatMap(profiles => 
        // console.log('flatmap: ', profiles.map(profiles => this.getUserDetails(profile)))
        return r.map(x => 
          this.getUserDetails(profile)
          );
      )
      .map(users => users);
   


// index page
import ...
....

 const userClass = new User();

 userClass.getUsers()
 .subscribe(users => 
 console.log('users: ', users);
 )

我发现了一个类似的问题Observable dependent on another observable

更新1：将返回的Observable类型替换为Observable<User>或Observable<User[]>

【参考方案1】：

我认为这里有一些问题。我建议将 Observable<any> 的类型替换为 observable 实际返回的类型，这将真正帮助您发现错误。将可观察对象链接在一起时，它对我有很大帮助。 take(1) 也是我的朋友，当时他们没有完成（但我只需要第一个结果）。

话虽如此，this post 对映射进行了一些很好的讨论。

flatMap/mergeMap - 立即为任何源项创建一个 Observable，所有以前的 Observable 都保持活动状态

concatMap - 等待前一个 Observable 完成后再创建下一个

switchMap - 对于任何源项，完成前一个 Observable 并立即创建下一个

exhaustMap - 源项目在前一个 Observable 未完成时被忽略

您想等待外部 observable - getAllUsers - 完成后再启动内部 observable - getUserDetails - 对吧？您可能正在寻找 concatMap 或 switchMap 而不是 flatmap。

【讨论】：

所以我在代码和帖子中都更改了返回的 observable 的类型。接下来我得到的是这个类型检查错误：Type 'Observable<Observable<User>>' is not assignable to type 'Observable<User[]>'. Type 'Observable<User>' is missing the following properties from type 'User[]': length, pop, push, join, and 18 more.ts(2322)。当我注释掉内部 observable 时，错误消失了。

我找到了适合我的解决方案：flatten nested observables。但是这个解决方案在打印结果之前等待所有可观察对象完成（需要时间，500 多个结果大约需要 5 分钟）。