转换为base64 AngularJS时获得异步函数

Question

我是一个移动开发人员，目前我正在开发一个混合移动应用程序，使用angularJS和离子型。

现在我遇到了异步函数的麻烦，它必须在完成所有转换和映射之后返回值，但是现在我总是获得空值，因为当转换运行时比映射花费的时间稍长，

我想让我的映射在转换完成后运行。

这是我的服务

angular.module('file.service', ['ionic'])
.factory('fileService', [‘$q’, function($q) {
    var factory = {};

    factory.getContentImageFix = function(fileParsing){
        var contentImg = [];
        for(var i = 0; i < fileParsing.length; i++){
            convertFileToDataURLviaFileReader(fileParsing[i].fullpath, function(base64Img){
                contentImg.push({
                    image: base64Img,
                    width: 400
                });
            });
        }
        return $q.all(contentImg);
    }

    function convertFileToDataURLviaFileReader(url, callback){
        var xhr = new XMLHttpRequest();
        xhr.responseType = 'blob';
        xhr.onload = function() {
            var reader  = new FileReader();
            reader.onloadend = function () {
                callback(reader.result);
            }
            reader.readAsDataURL(xhr.response);
        };
        xhr.open('GET', url);
        xhr.send();
    }
}]);

我的控制器就像这样

angular.module('scan.module’, ['ionic'])
.controller('scanController’, [‘fileService’, function(fileService) {
    var fileParsing = [
        {
            “name”:”a.jpg",
            "fullpath”:”[PATH]/a.jpg"
        },{
            "name”:”b.jpg",
            "fullpath":"[PATH]/b.jpg"
        }
    ];
    var contentImg = fileService.getContentImageFix(fileParsing);
    console.log(JSON.stringify(contentImg)); //not it is return zero array
}]);

实际上，我并不真正了解允诺的概念，所以我如何解决这个异步问题。

谢谢,

Answer 1

$q.all()接受承诺数组，因此可以更改convertFileToDataURLviaFileReader函数以返回允诺，如下所示

function convertFileToDataURLviaFileReader(url){
    var defer = $q.defer();
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function() {
        var reader  = new FileReader();
        reader.onloadend = function () {
            defer.resolve(reader.result);
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.send();
    return defer.promise;
}

然后

factory.getContentImageFix = function(fileParsing){
    var contentImg = [];
    for(var i = 0; i < fileParsing.length; i++){
          contentImg.push(convertFileToDataURLviaFileReader(fileParsing[i].fullpath));
    }
    return $q.all(contentImg);
}

在控制器中

fileService.getContentImageFix(fileParsing).then(function(contentImg){
    console.log(JSON.stringify(contentImg))
})

Answer 2

因为看起来被接受的答案不起作用：

http://plnkr.co/edit/SXKNbBc2b32UTzYIVsrB?p=preview

  FileService.getContentImages(files).then(function(images) {
    $timeout(function() {
      mv.images = images;

      console.log(images);
    }, 0);
  });

将异步数据导入当前的$digest存在问题。这是通过一个简单的超时解决的。

我所做的其他改变是引入了一个指令来使其工作，因为指令比div中的控制器更好:)