javascript - 如何使用 JavaScript 中的 Promise 进行状态更新？

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 .

The call() method calls a function with a given this value and arguments provided individually.

所以将其更改为:

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)。