Как использовать Observable каскадный 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>