Angular的承诺是异步的吗？ [英] Are Angular's promises asynchronous?

问题描述

我可能会错过一些关于Angular的承诺，但我想知道一些事情：承诺是异步的吗？我不确定'异步'是否是正确的词，但让我自己解释一下。

在我的代码中我使用promises做一个非常大的过程（读写）数百个大文件）我显示一个加载栏来观察过程的进度。我注意到即使我的代码在一个承诺中，它似乎也不是异步并冻结显示（我假设是由主线程管理）。

例如，您可以在此 Plnkr 中找到的代码中，我是想知道如何在大进程完成时让进度条移动。我理解为什么当我在主线程中调用它时它会冻结但不是在我使用Angular的承诺时。

  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（）;}）;};}）;  

解决方案

所以，我发现Web Workers，这是我的代码的第一个版本使用它们。

  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; 
 postMessage（时间）; 
} 
 
 var blob = new Blob（[onmessage =+ hugeProcess.toString（）]）; 
 
 //获取对工人'文件'的blob URL引用。 
 var blobURL = window.URL.createObjectURL（blob）; 
 var worker = new Worker（blobURL）; 
 
 worker.onmessage = function（message）{
 $ scope.processTime ='在'+ message.data +'ms'中完成; 
 $ scope。$ apply（）
}; 
 
 $ scope.onClickStartHugeProcessWithPromise = function（）{
 console.debug（'onClickStartHugeProcessWithPromise'）; 
 $ q（function（）{
 worker.postMessage（''）; //启动worker。
}）; 
}; 
}）; 
  

我不认为我使用的是正确的，但确实如此我想要的......我找到了适用于Angular的 ng-webworker 软件包承诺和网络工作者，这正是我正在寻找的。

谢谢大家的帮助。

I may have miss something about Angular's promises but I was wondering something : are promises asynchronous ? I'm not sure if 'asynchronous' is the right word but let me explain myself.

In my code I use promises to do a really big process (read and write hundreds of big files) while I display a loading bar to watch the progress of the process. I've noticed that even if my code is in a promise, it seems to not really be asynchronous and freeze the display (that I assume is manage by the main thread).

For example in the code bellow that you can find in this Plnkr, I'm wondering how to let the progress bar move while the big process is done. I understand why it's freezing when I call it in the main thread but not when I'm using Angular's promises.

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();
    });
  };
});

解决方案

So, I've discover Web Workers and here is a first version of my code using them.

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;
    postMessage(time);
  }

  var blob = new Blob(["onmessage = " + hugeProcess.toString()]);

  // Obtain a blob URL reference to our worker 'file'.
  var blobURL = window.URL.createObjectURL(blob);
  var worker = new Worker(blobURL);

  worker.onmessage = function (message) {
    $scope.processTime = 'Done in ' + message.data  + 'ms';
    $scope.$apply()
  };

  $scope.onClickStartHugeProcessWithPromise = function () {
    console.debug('onClickStartHugeProcessWithPromise');
    $q(function () {
      worker.postMessage(''); // Start the worker.
    });
  };
});

I don't think I'm using right but it does what I want ... I've found the package ng-webworker for Angular that seems to mix promises and web workers so that's exactly what I'm looking for.

Thank you all for your help.

这篇关于Angular的承诺是异步的吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！