javascript - 转换为 Base64 AngularJS 时获得异步函数

Question

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

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

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

这是我的服务

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

我的 Controller 是这样的

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

其实我不太了解promise的概念，那么我该如何解决这个异步问题。

谢谢

Answer 1

$q.all() 接受 Promise 数组，因此您可以更改 ConvertFileToDataURLviaFileReader 函数以返回 Promise，如下所示

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

在 Controller 中

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