javascript - 如何等待Callback函数的返回？

Question

如何正确实现该用例:客户确认操作后，我想显示等待屏幕，直到回调函数完全执行...

我已完成以下操作，但在调用 srv.hideLoadingScreen() 之后执行 REST 调用...:-/

对话服务:

srv.onApprove = function(callback){
    srv.displayLoadingScreen();
    callback();
    srv.hideLoadingScreen();
};

Controller :

ctrl.showConfirmModal = function(){
    //...
    if(approved){
        DialogService.onApprove(function(){
            ctrl.performAction();
        });
    }
};

ctrl.performAction = function(){
    console.log('performAction');
    if(angular.isDefined(ctrl.selectedNumberList)){
        var numberList = {
            nbList: ctrl.selectedNumberList
        };
        MyService.launch(numberList, function(response){ // REST call
            console.log('call ok');
        }, function(error){
            console.log('error');
        });
    }
};

---

更新:目前我选择了这个解决方案，可以避免 回调的 回调:关闭 ctr.perfomAction()

中的等待面板

MyService.launch(numberList, function(response){ // REST call
    console.log('call ok');
    DialogService.hideLoadingScreen();
}, function(error){
    console.log('error');
    DialogService.hideLoadingScreen();
});

Answer 1

您可以使用 the $http service返回一个 Promise。

异步操作只有在完成且调用堆栈清空后才会返回。由于我们会在返回它们之前留下范围，因此您可以使用 Promise 来确保您取回值。

app.service('MyService', function($http) {
  this.launch = function launch() {
    return $http({ method: 'GET', url: '/endpoint' });
  };
}

app.controller('MyCtrl', function(MyService) {
  MyService.launch()
     .then(function(response) {

     });
});

使用 $q 服务也可以实现同样的效果，为任何类型的异步调用返回一个 Promise。