延迟数组 $.when.apply(...) 运行太快答案

【问题标题】：Deferred Array $.when.apply(...) Runs too soon延迟数组 $.when.apply(...) 运行太快
【发布时间】：2020-10-27 03:56:53
【问题描述】：

下面的 $.when.apply(...) 立即运行，而不是等待延迟数组中提供的每个文件完成发布。我尝试了很多方法，代码工作正常，但是延迟数组的行为就像它立即完成一样，而不是首先等待所有 ajax 调用完成。

function handleFiles() {
  showUploadingSpinnerOnModal() 

  var metadata = []
  var rootFolderSelected = $("#root-folder").val()
  var childFolderSelected = $("#child-folder").val()
  metadata["rootFolderName"] = rootFolderSelected
  metadata["childFolderName"] = childFolderSelected

  $.when.apply($, loopThroughFiles(metadata)).then(function(deferredArry) {
      // do something after
      console.log("2: ", deferredArry)
      updateViews()
  })
} 

function loopThroughFiles(metadata) {
  deferredArry = []
  $.each(containerFiles, function(index, file) {
      deferredArray.push(postNewFile(file, metadata))
      console.log("added promise to deferred array");
  })
  return deferredArry
}

// 发布新文件...

function postNewFile(fileObj, metadata) {

    var getFile = getFileBuffer()

    getFile.done(function(arrayBuffer) {
        var addFile = addFileToFolder(arrayBuffer, fileObj)
        addFile.done(function(file, status) {
            var getItem = getListItem(file.d.ListItemAllFields.__deferred.uri)
            getItem.done(function(listItem, status) {
                var changeItem = updateListItem(listItem.d.__metadata, metadata)
                changeItem.done(function(data, status) {
                    console.log("File Uploaded and Metadate Updated")
                })
                changeItem.fail(onError)
            })
            getItem.fail(onError)
        })
        addFile.fail(onError)
    })
    getFile.fail(onError)


    function getFileBuffer() {
        var deferred = $.Deferred()
        var reader = new FileReader()
        reader.onloadend = function(e) {
            deferred.resolve(e.target.result)
        }
        reader.onerror = function(e) {
            deferred.reject(e.target.error)
        }
        reader.readAsArrayBuffer(fileObj)
        return deferred.promise()
    }


    function addFileToFolder(arrayBuffer, fileObj) {
        var apiUrl = PROJECT_BASE_URL + "/_api/web/GetFolderByServerRelativeUrl('documentLibrary')/Files/add(url='" + fileObj.name + "',overwrite=true)"
        return $.ajax({
            url: apiUrl,
            method: 'POST',
            data: arrayBuffer,
            processData: false,
            headers: {
                "accept": "application/json; odata=verbose",
                "contentType": "application/json; odata=verbose",
                "content-Length": arrayBuffer.byteLength,
                "X-RequestDigest": formDigest
            }
        })
    }

    function getListItem(fileURI) {
        return $.ajax({
            url: fileURI,
            type: "GET",
            headers: {
                "accept": "application/json; odata=verbose"
            }
        })
    }

    function updateListItem(fileMetadata) {
        var data = {
            __metadata: {
                'type': 'SP.Data.DocumentlibraryItem'
            }
        }
        data['RootFolder'] = metadata.rootFolderName
        data['ChildFolder'] = metadata.childFolderName

        return $.ajax({
            url: fileMetadata.uri,
            type: 'POST',
            data: JSON.stringify(data),
            async: true,
            headers: {
                "content-type": "application/json;odata=verbose",
                "content-length": data.length,
                "IF-MATCH": fileMetadata.etag,
                "X-HTTP-Method": "MERGE",
                "X-RequestDigest": formDigest
            }
        })
    }
}

function onError(error) {
    console.log(error.responseText)
}

【问题讨论】：

标签： javascript jquery arrays promise deferred

【解决方案1】：

postNewFile() 不返回承诺。实际上，它不会返回任何内容，因此当您将项目推入数组时，您只是创建了一个包含undefined 值的数组。因此，您将 undefined 值的数组传递给 $.when() 并且由于该数组不包含任何承诺，因此无需等待。

您需要从postNewFile() 正确返回一个承诺，只有在该文件中的所有异步操作都完成后才会解决或拒绝该承诺。所有这些异步操作也应该正确链接在一起，以便它们是有序的，因此它们的承诺是链接的（对于完成和错误）。

【讨论】：