时间戳

首页 > 解决方案 > 带有 rxjs 错误的相关请求：可观察 {_isScalar: false, _subscribe: f}

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

问题描述

我是 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 依赖于另一个 observable

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

标签： reactjstypescriptrxjs

解决方案

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

话虽如此，这篇文章对映射有一些很好的讨论。

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

concatMap - 在创建下一个 Observable 之前等待前一个 Observable 完成

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

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

getAllUsers您想在启动内部可观察对象之前等待外部可观察对象 - - 完成getUserDetails- 对吧？您可能正在寻找 concatMap 或 switchMap 而不是 flatmap。

推荐阅读