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

问题描述

我可能错过了一些关于 Angular 的承诺，但我想知道一些事情:承诺是异步的吗?我不确定异步"这个词是否正确，但让我解释一下.

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

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

var app = angular.module('plunker', []);app.controller('MainCtrl', function($scope, $q) {函数巨大的进程(){变量 i = 0;var start = new Date().getTime();而 (i++ <100000) {控制台日志(i);}var end = new Date().getTime();var 时间 = 结束 - 开始；$scope.processTime = 'Done in ' + time + 'ms';}$scope.onClickStartHugeProcess = function () {console.log('onClickStartHugeProcess');巨大的进程()；};$scope.onClickStartHugeProcessWithPromise = function () {console.log('onClickStartHugeProcessWithPromise');$q.when().then(函数(){返回巨大的进程()；});};});

解决方案

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

app.controller('MainCtrl', function($scope, $q) {函数巨大的进程(){变量 i = 0;var start = new Date().getTime();而 (i++ <100000) {控制台日志(i);}var end = new Date().getTime();var 时间 = 结束 - 开始；postMessage(时间)；}var blob = new Blob(["onmessage = " + hugeProcess.toString()]);//获取对我们的 worker 'file' 的 blob URL 引用.var blobURL = window.URL.createObjectURL(blob);var worker = new Worker(blobURL);worker.onmessage = 函数(消息){$scope.processTime = 'Done in ' + message.data + 'ms';$scope.$apply()};$scope.onClickStartHugeProcessWithPromise = function () {console.debug('onClickStartHugeProcessWithPromise');$q(函数(){worker.postMessage('');//启动工人.});};});

我不认为我使用正确，但它做我想要的......我找到了包ng-webworker 似乎混合了 promise 和 web worker，所以这正是我正在寻找的.

感谢大家的帮助.

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屋！