javascript - Angular 的 Promise 是异步的吗？

Question

我可能错过了 Angular promise 的一些内容，但我想知道一些事情: promise 是异步的吗？我不确定“异步”这个词是否正确，但让我解释一下。

在我的代码中，我使用 Promise 来执行一个非常大的过程(读取和写入数百个大文件)，同时显示一个加载栏来观察该过程的进度。我注意到，即使我的代码是在 promise 中，它似乎并不是真正异步并卡住显示(我假设是由主线程管理的)。

例如，您可以在 Plnkr 中找到下面的代码，我想知道如何在大流程完成时让进度条移动。我明白为什么当我在主线程中调用它时它会卡住，但当我使用 Angular 的 Promise 时却不会。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $q) {
  
  function hugeProcess () {
    var i = 0;
    var start = new Date().getTime();
    while (i++ < 100000) {
      console.log(i);
    }
    var end = new Date().getTime();
      var time = end - start;
      $scope.processTime = 'Done in ' + time  + 'ms';
  }
  
  $scope.onClickStartHugeProcess = function () {
    console.log('onClickStartHugeProcess');
    hugeProcess();
  };
  
  $scope.onClickStartHugeProcessWithPromise = function () {
    console.log('onClickStartHugeProcessWithPromise');
    $q.when()
    .then(function () {
      return hugeProcess();
    });
  };
});

Answer 1

代码中的问题是您的 hugeProcess 函数永远不会产生。所以是的，它是异步调用的(then 回调在 Promises/A+ Promise 实现中总是异步调用)，但这并不会改变 hugeProcess 在被调用时正在执行的操作，它会占用主 UI 线程，这样在它运行时就不会发生任何其他事情。只有一个主 UI 线程，除了 web workers 之外，所有 JavaScript 都在该一个主 UI 线程上运行。 .

为了让hugeProcess不这样做，你必须将它分解并让它在短暂的延迟后通过setTimeout(或者也许是Angular中内置的东西)调用自己.

如Joe Clay points out ，这段代码没有多大意义:

$q.when()
.then(function () {
  return hugeProcess();
});

这实际上是:

setTimeout(hugeProcess, 0);

...since $q.when() 不带参数返回已解决的 Promise，并且向已解决的 Promise 添加 then 回调只会导致您的回调被尽快调用(但异步；例如，then 在调用回调之前返回)。