javascript - Promise 在循环中无法正常工作

Question

Promise 无法正常工作 saveService 在 promise 解决之前被调用意味着所有文档都已上传，但是当我在 saveService 中记录数据时，它显示上传的文档无法找出问题所在，请告诉我哪里错了

//file upload
$scope.fileObj = {};
$scope.documentUploaded = [];
var uploadFile = function (type) {

    var file = $scope.fileObj[type];

    //service to upload file
    fileService.uploadDocument(file)
        .success(function (data, status) {

            console.log("uploaded successfully", data);

            $scope.documentUploaded.push({
                doc: {
                    fileName: data.name,
                    path: data.path
                }
            });

        })
        .error(function (data, status) {

        });          
}


$scope.save = function () { //on click of submit, save() is called

var defer = $q.defer();
var promises = [];        

//looping to upload files       
angular.forEach($scope.documentList, function (doc) {

    if ($scope.fileObj[doc.type]) {
       promises.push(uploadFile(doc.type));                
    }            
});

//this will save data when promise will get complete
var saveData = function () {
    var dataToSave = {
        //other fields
        documents: $scope.documentUploaded
    };

    saveService.saveApi(dataToSave)
        .success(function () {
            defer.resolve('data saved');                    
        })
        .error(function () {
            defer.reject("something went wrong");                    
        });
}

$q.all(promises).then(saveData);
return defer;         

}

Answer 1

uploadFile() 需要返回一个 Promise(在其工作完成时解决)，$q.all(promises) 才能工作。

现在它没有返回任何内容，因此您正在传递 $q.all() 一个未定义值的数组。由于该数组中没有 Promise，因此 $q.all() 立即执行 .then() 处理程序。

这是问题的精简版本:

var promises = [];
...forEach(function() {
    promises.push(uploadFile(doc.type)); 
});
$q.all(promises).then(saveData);

因此，您将 uploadFile() 的返回值插入 Promise 数组。但 uploadFile() 甚至不返回任何内容。因此，您正在推送 undefined。然后，当 $q.all 需要一个 Promise 数组时，您将一个 undefined 值数组传递给它。

因此，要使此逻辑正常工作，您需要 uploadFile() 返回一个 promise ，当 uploadfile() 实例完成其异步工作时，该 promise 将得到解决.

<小时/>

如果 fileService.uploadDocument() 已经返回一个 Promise，您只需返回该 Promise 即可。如果没有，那么您可以在 uploadFile() 的开头创建一个并在末尾返回它，然后在 .success() 和 中解析或拒绝它>.error() 处理程序。

<小时/>

如果 fileService.uploadDocument() 已经可以做出 promise ，那么首选解决方案是使用该 promise (我不知道该 API，所以不知道它是如何工作的)。如果它不能做出 promise ，那么您可以像这样做出自己的 promise :

var uploadFile = function (type) {
    var defer = $q.defer();
    var file = $scope.fileObj[type];

    //service to upload file
    fileService.uploadDocument(file)
        .success(function (data, status) {
            console.log("uploaded successfully", data);
            $scope.documentUploaded.push({
                doc: {
                    fileName: data.name,
                    path: data.path
                }
            });
            defer.resolve();

        })
        .error(function (data, status) {
            defer.reject();
        });          
    return defer.promise;
}