javascript - AngularJS .then 不是一个 function()

Question

为什么我在调用 .then 时会收到此错误？

vm.submitPromise(...).then is not a function

我的代码的简化版本是这样的:

    var submitPromise = function($q) {
      return function() {
        var deferred = $q.defer();
        //$scope.ngSubmitFunction();    

        // simulated async function
        $timeout(function() {
          deferred.resolve('data received!')
        }, 2000);
        return deferred.promise;
      }
    }

    function ngSubmit($form) {
      vm.submitDisabled = true;
      submitPromise().then(function() {
          vm.submitDisabled = false;
      });
    };

这是管理表单的指令的一部分。目的是让“提交”按钮调用可能有一个或多个异步调用的函数，我需要等待它们完成才能再次启用“提交”按钮。

几乎在我读到的所有地方，当函数不返回 promise 时都会发生这种情况，但我的却返回 promise (我相信)。不是吗？我缺少什么。我正在尝试使用模拟异步函数 $timeout 和其中的 .resolve 进行调试(可以在代码中看到)，但我得到了相同的错误。

Answer 1

submitPromise 返回一个函数，该函数又返回一个 Promise，但您并未调用该函数。给定该方法的签名，您需要像这样使用它:

function ngSubmit($form) {
  vm.submitDisabled = true
  submitPromise()().then(function () {
    vm.submitDsabled = false
  })
}

您可能想这样做:

var submitPromise = function($q) {
  var deferred = $q.defer();
  //$scope.ngSubmitFunction();    

  // simulated async function
  $timeout(function() {
    deferred.resolve('data received!')
  }, 2000);
  return deferred.promise;
}

请注意，延迟模式已被弃用，并且 $q(以及浏览器中的 native Promise 实现)建议使用更基于构造函数的模式:

function submitPromise($q) {
  return $q(function (resolve) {
    $timeout(function() {
      resolve()
    }, 2000)
  })
}

这样做的原因主要是因为您对 $q 的使用符合 ES6 规范，并且还意味着您没有强制管理 Promise 本身(这可能会导致编写错误)。