Promise Chaining / Cascading to RxJS angular 1 to angular 2

Question

我目前正在尝试将一些好的旧 $http Promises 转换为 angular2 中的 rxJs observables。

一个非常简单的例子，我过去经常在 Angular 1 中做的事情：

// Some Factory in Angular 1
var somethings = [];
var service = {
    all: all
};
return service;

function all() {
    return $http
        .get('api/somethings')
        .then(function(response) {
            somethings = parseSomethings(response.data);
            return somethings;
        });
}

// Some Controller in Angular 1
var vm = this;
vm.somethings = [];
vm.loading = true;

loadThings();

function loadThings() {
    SomeFactory
        .all()
        .then(function(somethings) {
            vm.somethings = somethings;
        })
        .finally(function() {
            vm.loading = false;
        })
}

现在我可以使用 RxJs Observable 和 Subject 实现与 angular2 类似的功能。但我不确定如何将“完成挂钩”返回给调用者。 （例如：angular1 控制器中的加载）

我对 angular2 的尝试是类似的：

// Some Service in Angular 2
export class SomeService {
    private _somethings$: Subject<Something[]>;
    private dataStore: {
        somethings: Something[]
    };

    constructor(private http: Http) {}

    get _somethings$() : Observable<Something[]> {
        return this._somethings$.asObservable();
    }

    loadAll() {
        this.http
            .get(`api/somethings`)
            .map(response => response.json())
            .subscribe(
                response => {
                    this.dataStore.somethings = parseSomethings(response.data);
                    this._somethings$.next(this.dataStore.somethings);
                }
            );
    }
}

//Some Component in Angular 2
export class SomeComponent() {

    constructor(private someService: SomeService) {}

    ngOnInit() {
        this.someService.loadAll();
        this.somethings = this.someService.somethings$;
    }
}

注意

我在这里使用了 Subject / Observable，这样当我创建/更新/删除“某物”时，我可以调用 .next 来通知订阅者。

例如：

create(something: Something) : Observable<Something>{
    return this.http.post(`api/somethings`, JSON.stringify(something))
        .map(response => response.json())
        .do(
            something => {
                this.dataStore.somethings.push(something);
                this._somethings$.next(this.dataStore.somethings); //Notify the subscribers
            }
        );
}

注意

这里我在方法中使用了 .do，当在“表单组件”中调用该方法时，我订阅只是为了获取完成处理程序：

this.someService.create(something).subscribe(
(ok) => ...
(error) => ...
() => stop loading indicator
)

问题

• 我们如何在 Angular 2 中使用 RxJs 将完成挂钩传递给调用者（例如 angular 1 控制器）
• 存在哪些替代路径来实现类似行为？

Answer 1

您的最后一个代码示例很好。只需使用map() 而不是subscribe() 并在呼叫站点订阅。

你可以使用

return http.post(...).toPromise(val => ...))

或

return http.post(...).map(...).toPromise(val => ...))

获得与 Angular 中相同的行为，您可以使用 .then(...) 链接后续调用