javascript - 如何避免回调 hell

Question

我在 AngularJS 中有这个确认，它需要两个回调:一个是用户单击是，另一个是用户在对话框上单击否。

我需要先询问用户是否已完成操作，如果他回答是，我还需要询问他是否要将用户添加为管理员。无论这两个问题的答案如何，我都需要持久化数据。

所以我有这个可怕的、回调 hell 出没的代码来处理我上面提到的分支:

$scope.promptAndSave = function() {

  // first question
  $scope.confirmation.display("Confirmation", "Did you finish working on this Reference Check?", function() {

    // handles Yes for first question
    $scope.referenceCheck.finished = true;
    var manager_name = $scope.referenceCheck.first_name + " " + $scope.referenceCheck.last_name;
    $scope.confirmation.display("Add new Manager", "Do you want to add <b>" + manager_name + "</b> as a new manager to your database?", function() {

      // handles Yes for second question
      $scope.referenceCheck.add_manager = true;
      $scope.saveReferenceCheck();

    }, function() {

      // handles No for second question
      $scope.saveReferenceCheck();

    });
  }, function() {

    // handles No for first question
    $scope.saveReferenceCheck();

  });
};

这是否可以使用 promise 来解决？或者是否有任何其他更通用的 JS 技术更适合这种情况？

我知道 AngularJS 提供了 $q，这对这里有帮助吗？上面的代码在转换为 promise 时会是什么样子？

编辑

所以 confirmation 是我的 $scope 上的一个本地对象，像这样:

$scope.confirmation = {
  visible: false,
  title: "",
  prompt: "",
  yes: function() {
    this.visible = false;
    this.yesHandler();
  },
  no: function() {
    this.visible = false;
    this.noHandler();
  },
  display: function(title, prompt, yesHandler, noHandler) {
    this.title = title;
    this.prompt = prompt;
    this.yesHandler = yesHandler;
    this.noHandler = noHandler;
    this.visible = true;
  }
};

我有与对象交互以显示提示的模板 HTML 代码:

<div id="confirmationForm" ng-show="confirmation.visible">
  <div class="form-title">{{ confirmation.title }}</div>
  <div class="form-body">
    <div class="message" ng-bind-html-unsafe="confirmation.prompt"></div>

    <div class="actions">
      <span>
        <button ng-click="confirmation.yes()">Yes</button>
        <button ng-click="confirmation.no()">No</button>
      </span>
      <img src="/assets/spinner.gif" ng-show="confirmation.busy">
    </div>
  </div>
</div>

编辑 2

在一些帮助下，我设法将其组合在一起:http://jsfiddle.net/LJr5z/1/

编辑 3

最后，$q 在 Angular 1.0.3 中不支持 finally，所以这是 AngularJS 1.2 的最后一个版本的 JSFiddle - http://jsfiddle.net/LJr5z/3/

Answer 1

所以注入(inject) $q 并试试这个。

$scope.confirmation = {
  visible: false,
  title: "",
  prompt: "",
  yes: function() {
    this.visible = false;
    this.dfd.resolve();
  },
  no: function() {
    this.visible = false;
    this.dfd.reject();
  },
  display: function(title, prompt) {
    this.dfd = $q.defer();
    this.title = title;
    this.prompt = prompt;
    this.visible = true;
    return this.dfd.promise;
  }
};

调用它:

$scope.confirmation.display('title', 'prompt')
.then(function() { 
    // return another promise here, yes clicked
}, function() {
    // no clicked
})
.then(...);