如何在 Javascript 中使用 Promises 进行状态更新？答案

【问题标题】：How to make status update with Promises in Javascript?如何在 Javascript 中使用 Promises 进行状态更新？
【发布时间】：2018-05-14 06:53:37
【问题描述】：

我有一个返回 Promise 的函数：

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

函数在某处被解析，我调用“resolve()”方法返回结果。这按预期工作。

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

作为一种解决方法，除了我可以使用的“解决”和“拒绝”之外，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});
      }
    })
  }
 })
}

【问题讨论】：

the arguments passed to the callback are undefined in the receiving end 为什么不修复接收端以便可以传递回调？
callbackProgress 是如何被调用的？问题可能是您没有显示的代码，即{...} 中的代码 ...类似于callbackProgress(var1, var2) ... 其中var1 在回调中是progress，并且var2 是 id（它们不需要与您调用函数的名称相同）
感谢您帮助解决根本问题。请参阅编辑。调用回调后只定义一个参数。
我不知道您的callbackProgress 函数是如何实现的，但请注意Function.call 将this 对象作为第一个参数。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript promise es6-promise

【解决方案1】：

因为你的 uploadImagesexpects 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() 方法使用给定的 this 值和单独提供的参数调用函数。

所以改成：

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

【讨论】：

或者只使用更简单的callbackProgress(percentage, id)。