Question

我有一个返回Promise的函数：

export const uploadImages = (images, callbackProgress) =>{
  return new Promise((resolve, reject) =>{...}

在那里的某个地方解决了函数，我调用'resolve（）'方法来返回结果。这可以按预期工作。

我想报告上传进度，所以我尝试使用回调。这不起作用，因为传递给回调的参数在接收端是未定义的。我没有理解真正的原因，因为在调用回调之前，参数已经很好地定义了。

无论如何作为一种解决方法，除了我可以使用的'resolve'和'reject'之外，Promise对象还有'onProgressChange'方法吗？

这是函数调用：

uploadImages(fileList, function(progress, id) {
        console.log("SCENE1 | uploadImages() | progress...")
        console.log("SCENE1 | uploadImages() | id: ", id)
        console.log("SCENE1 | uploadImages() | progress: ", progress)
      }).then(response => {
        console.log("SCENE1 | uploadImages() | done, response: ", response)
      }, error => {
        console.log("SCENE1 | uploadImages() | error!")
      })

每次'progress'变量未定义，即使它已在uploadImages函数本身中定义。

修改

这是调用回调的完整函数。

变量'id'和'percentage'已定义，但在进入回调后，只有ID按定义出现，而百分比未定义。事实上，其中一个只是未定义令人难以置信。

export const uploadImages = (images, callbackProgress) =>{
 return new Promise((resolve, reject) =>{

  const myUploadProgress = (thumbId) => (progress) => {
    let id = thumbId
    let percentage = Math.floor((progress.loaded * 100) / progress.total)
    console.log("FUNCATION | uploadImages | calling back with id: ", id)
    console.log("FUNCATION | uploadImages | calling back with progress: ", percentage)
    callbackProgress.call(percentage, id)
  }
  var originals = []
  var thumbnails = []
  let totalNrOfImages = images.length
  var uploadImageCounter = 0
  var i;
  for (i = 0; i < images.length; i++) {
    var thumbId = i
    var config = {
      onUploadProgress: myUploadProgress(thumbId)
    };
    const formData = new FormData()
    formData.append('img', images[i])
    uploadImage2(formData, config).then(resp => {
      originals.push(resp.oriUrl)
      thumbnails.push(resp.thumbUrl)
      uploadImageCounter=uploadImageCounter+1
      if(images.length == uploadImageCounter){
        resolve({orig:originals, thumbs:thumbnails});
      }
    })
  }
 })
}

Answer 1

由于您的uploadImages需要2个参数而你只在这里通过一个：

const myUploadProgress = (thumbId) => (progress) => {
    let id = thumbId
    let percentage = Math.floor((progress.loaded * 100) / progress.total)
    console.log("FUNCATION | uploadImages | calling back with id: ", id)
    console.log("FUNCATION | uploadImages | calling back with progress: ", percentage)
    callbackProgress.call(percentage, id) // here
  }

因为callbackProgress是使用上下文percentage和参数id调用的，这显然不是您想要的。更多信息here。

call（）方法调用一个函数，该函数具有给定的值和单独提供的参数。

所以改成它：

const myUploadProgress = (thumbId) => (progress) => {
    let id = thumbId
    let percentage = Math.floor((progress.loaded * 100) / progress.total)
    console.log("FUNCATION | uploadImages | calling back with id: ", id)
    console.log("FUNCATION | uploadImages | calling back with progress: ", percentage)
    callbackProgress.call(null, percentage, id)
  }

通过传递null，您提供了默认为全局范围的上下文，但在您的回调中，您并不关心，因为您没有以任何方式使用this关键字。

修改：

或者（感谢提醒Bergi只需使用callbackProgress(percentage, id)。

如何使用Javascript中的Promises进行状态更新？

1 个答案: