angular - rxjs observable.of(object) 返回 {"_isScalar": "", "value": {}, "scheduler": ""} 而不是值

标签 angular rxjs observable

我对 rxjs 还很陌生。

我试图创建一个函数来运行像这样的 angular 2 http 请求:

syncFromApi$() {

  // create Headers
  ...

  let ob$ = this.http.post(
    CONFIG_APP.apiEndpoint + '/sync/app',
    '',
    { headers: headers }
  )
  .map((response:Response) => {
    return Observable.of({type: "success", payload: response.json()});
  })
  .catch(function (err:Response) {
    return Observable.of({type: "error", payload: err.json()});
  });

  return ob$;
}

简而言之,当成功时,我将返回一个对象,指示请求是否成功。之后我想根据返回的对象切换 map :

let o$ = syncFromApi$()
  .switchMap((value) => {
    console.log("value", JSON.stringify(value, null, 0));
    if (data.type === 'success') {
      return Observable.of(1);
    } else if (data.type === 'error') {
      return Observable.of(2);
    }
  });

我面临的问题来了。 console.log(...) 输出这样的对象:

value, {"_isScalar": true, "value": THIS_IS_WHAT_I_NEED_AS_VALUE, "scheduler": null}

但我只需要使用 syncFromApi$ 函数返回的对象。

如果我以错误的方式使用 observable.of(),谁能给我解释一下?

我尝试了 observable.of(1),它返回 1 作为值。如果我使用一个对象 (observable.of({ type: "myType", message: "myMessage"})),它会返回一个对象,它用键“_isScalar”、“值”和“调度程序”。

提前致谢。

最佳答案

您的问题出在您的 map 运算符中:

let ob$ = this.http.post(
  CONFIG_APP.apiEndpoint + '/sync/app',
  '',
  { headers: headers }
)
.map((response:Response) => {
  return {type: "success", payload: response.json()}; // <----
})

您需要返回一个不是可观察对象的对象。 map 运算符按原样使用对象,不会将返回的可观察对象投影到可观察对象链中。

如果由于某些原因要返回Observable.of,则需要改用flatMap操作符:

let ob$ = this.http.post(
  CONFIG_APP.apiEndpoint + '/sync/app',
  '',
  { headers: headers }
)
.flatMap((response:Response) => {
  return Observable.of({type: "success", payload: response.json()});
})

这对 catch 运算符来说很好,因为它希望将一个可观察对象返回到其关联的回调中。

关于angular - rxjs observable.of(object) 返回 {"_isScalar": "", "value": {}, "scheduler": ""} 而不是值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36992326/

相关文章:

ios - 在 Firebase FCM 上检测前景推送点击事件

javascript - Angular 2 静态页面路由

javascript - 订阅数组更改

angular - take(1) 与 first()

angular - 非平凡 Angular 组件中 RxJS 的最佳实践

angular - 路由更改时销毁 Angular 服务

500 个服务器错误的 Angular 句柄

angular - 如果我们不订阅以 Angular 返回可观察对象的 HttpClient 请求,会发生什么

arrays - 对可观察数组进行分页

android - 使用Retrofit +RxJava在请求之间传输数据