Angular 2 Http，RxJS 无法读取未定义的属性“取消订阅”答案

【问题标题】：Angular 2 Http, RxJS Cannot read property 'unsubscribe' of undefinedAngular 2 Http，RxJS 无法读取未定义的属性“取消订阅”
【发布时间】：2016-07-14 16:46:00
【问题描述】：

编辑：我已经解决了这个问题。请在下面查看我的答案，因为它可能对某人有所帮助。如果您知道更好的答案，请发布！ :)

我正在处理Angular 2 Universal API 缓存，并且有一个像这样的 ApiService：

import {Http} from '@angular/core';

export class ApiService {
    constructor(private http: Http, private cache: CacheService)
}

get(url) {
    if (cache_data) {
        //Create new observable from scratch
        return new Observable(sub => {
            sub.next(cache_data);
        });
    } else {
        //Use Angular 2's Http service, which creates an Observable for me
        return this.http.get(url)
            .map(res => res.json())
            .catch(err => throw err);
    }
}

在我订阅的另一项服务中，我有：

import {ApiService} from './api/api.service';

export class ConsumerService {
    constructor(apiService: ApiService) {}
    let sub = this.apiService.get('www.example.com')
        .subscribe(data => {
            console.log(data);
            sub.unsubscribe();
        })
}

如果请求的数据不在缓存中，并且服务器必须对其进行 http 请求，则上述代码可以完美运行。但是，如果数据 is 在缓存中，我会收到以下错误：Cannot read property 'unsubscribe' of undefined 当然，未定义是指我的变量sub。

我最初的想法是，我在缓存中创建的 Observable 类型与 Angular 2 的 Http observable 不同，因此会产生错误。我已经尝试过对此进行测试，但无法确认。任何帮助表示赞赏。

【问题讨论】：

你为什么在next 块中调用unsubscribe？另外已经有单品的创建方法Observable.of(cached_data)。
你也可以在sub.next()之后调用sub.complete()来完成observable，它会在完成时自动取消订阅。

标签： angular http rxjs

【解决方案1】：

我决定通过保持我的应用程序的异步风格来解决这个问题。我不只是将我的 cache_data 返回到一个 observable 中，而是首先将它包装在一个 Promise 中，然后将它包装在一个 observable 中。

let cacheFromPromise = new Promise(resolve => {
    resolve(cache_data);
});

return Observable.fromPromise(cacheFromPromise);

现在一切正常。

【讨论】：

你知道为什么会这样吗？我遇到了完全相同的问题并按照您所做的操作，将 Promise 转换为 Observable 允许我在其上调用 unsubscribe()。
@KaMok 这似乎发生在 Observable 没有返回任何东西的时候，所以我上面例子中的 sub 变量还没有定义。将它包装在一个承诺中强制它是异步的，因此给sub时间分配一个值
我使用Observable.of(true)，以及Observable.create() 和.next(true) 的3 行，返回true。