如何使用可觀察級聯AJAX多種方法

Question

live exmaple

我本來期望它以進行打印：

• 打開加載屏幕上發送Ajax結果
• 得到AJAX結果之前和記錄
• 關閉加載屏幕

以下代碼被執行，我想問一下是否有其他方法來寫

var openLoadingPage$ = Rx.Observable.create(function(observer) { 
 
    console.log("open..."); 
 
    observer.complete(); 
 
}); 
 

 
var closeLoadingPage$ = Rx.Observable.create(function(observer) { 
 
    console.log("close.."); 
 
    observer.complete(); 
 
}); 
 

 
var ajax$ = Rx.Observable.create(function(observer) { 
 
    //todo:get ajax result 
 
    observer.next("hello world"); 
 
    observer.complete(); 
 
}); 
 

 
var result$ = Rx.Observable.of(
 
    openLoadingPage$, 
 
    ajax$.delay(2000), 
 
    closeLoadingPage$) 
 
    .concatAll(); 
 

 
result$.subscribe({ 
 
    next: (value) => { 
 
    console.log("get ajax result:", value); 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.js"></script>

Answer 1

要注意的是，當你寫Rx.Observable.of(myFunc1())，myFunc1被立即執行，並在你的情況下，它的返回值（undefined ，因爲它沒有）將是可觀察值的單個事件值。

（同樣的問題與subscribe，這需要一個回調，當你通過的console.log("complete")返回值）

你可能將不得不通過最後部分寫入.subscribe(() => console.log("complete")）更大的成功。

對於FUNC部分，很難告訴你想達到什麼樣的，但這裏的一個嘗試：

function myFunc1() { 
 
    console.log("myFunc subscribe called"); 
 
    return "f1" 
 
} 
 

 
function myFunc2() { 
 
    console.log("myFunc2 subscribe called"); 
 
    return "f2" 
 
} 
 

 
var myFunc1$ = Rx.Observable.defer(() => Rx.Observable.of(myFunc1())); 
 
var myFunc2$ = Rx.Observable.defer(() => Rx.Observable.of(myFunc2())); 
 

 
myFunc1$ 
 
    .delay(2000) 
 
    .concat(myFunc2$) 
 
    .subscribe(console.log);

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.js"></script>