将回调地狱转换为可观察链答案

【问题标题】：Converting callback hell to observable chain将回调地狱转换为可观察链
【发布时间】：2017-02-01 15:04:22
【问题描述】：

我一直在使用我的函数返回 observables 的约定，以实现强制顺序的一系列函数调用，每个函数调用都将返回值传递给它们的后续“回调”函数。但是在阅读和观看教程之后，似乎我可以用我认为的平面图做得更好。我想我很接近这个建议https://stackoverflow.com/a/34701912/2621091 虽然我不是从承诺开始的。下面我列出了一些例子，我希望在清理方面得到帮助，并提供更好的方法的建议。非常感谢您提供的帮助：

grandparentFunction().subscribe(grandparentreturnobj => {

    ... oprate upon grandparentreturnobj ...

});


grandparentFunction() {

    let _self = this;

    return Observable.create((observer) => {

        ...

        _self.parentFunction().subscribe(parentreturnobj => {

            ... 

            _self.childFunction( parentreturnobj ).subscribe(childreturnobj => {

                ... 

                observer.next( grandparentreturnobj );
                observer.complete(); 
            });
        });
    });
}


parentFunction() {

    let _self = this;

    return Observable.create((observer) => {

        ...

        observer.next( parentreturnobj );
        observer.complete(); 
    }
}


childFunction() {

    let _self = this;

    return Observable.create((observer) => {

        ...

        observer.next( childreturnobj );
        observer.complete(); 
    }
}

【问题讨论】：

标签： rxjs angular2-observables

【解决方案1】：

RxJS 中的一般经验法则是，你应该尽量避免创建手工制作的自定义 Observables（即使用Observable.create()），除非你知道自己在做什么并且无法避免.如果你没有牢牢掌握 RxJS 的“契约”，有一些棘手的语义很容易导致微妙的问题，所以通常最好尝试使用现有的 Observable 创建函数。更好的是，通过在现有的 Observable 上应用运算符来创建 Observable，然后返回它。

就您的示例代码的具体批评而言，您是对的，您应该使用.flatMap() 创建 Observable 函数链。您当前拥有的嵌套 Observable.create()s 不是很像 Rx，并且遇到了与“回调地狱”风格的代码相同的问题。

这是一个与您的示例相同的示例，但采用更惯用的 Rx 风格。 doStuff() 是我们要创建的异步函数。 doStuff()需要调用异步函数step1()，将其结果链接到异步函数step2()中，然后对结果做进一步的操作，将最终结果返回给doStuff()的调用者。

function doStuff(thingToMake) {
    return step1(thingToMake)
        .flatMap((step1Result) => step2(step1Result))
        .map((step2Result) => {
            let doStuffResult = `${step2Result}, and then we're done`;
            // ...
            return doStuffResult;
        });
}

function step1(thingToMake) {
    let result = `To make a ${thingToMake}, first we do step 1`;
    // ...
    return Rx.Observable.of(result);
}

function step2(prevSteps) {
    let result = `${prevSteps}, then we do step 2`
    // ...
    return Rx.Observable.of(result);
}

doStuff('chain').subscribe(
    (doStuffResult) => console.log(`Here's how you make a chain: ${doStuffResult}`),
    (err) => console.error(`Oh no, doStuff failed!`, err),
    () => console.debug(`doStuff is done making stuff`)
)

Rx.Observable.of(x) 是现有 Observable 创建函数的示例。它只是创建了一个 Observable，它返回 x，然后完成。

【讨论】：