Как сделать обновление статуса с Обещаниями в Javascript? - PullRequest
Новая
       7

Как сделать обновление статуса с Обещаниями в Javascript?

0 голосов
/ 14 мая 2018

У меня есть функция, которая возвращает обещание: 

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

Где-то там функция разрешается, и я вызываю метод resolv для возврата результата. Это работает как ожидалось.

Я хочу сообщить о ходе загрузки, поэтому я попытался использовать обратный вызов. Это не работает, потому что аргументы, переданные обратному вызову, не определены на принимающей стороне. Я не понял истинную причину, потому что аргументы четко определены непосредственно перед вызовом обратного вызова.

Как бы то ни было, в качестве обходного пути у объекта 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.

EDIT

Вот полная функция, которая вызывает обратный вызов.

Переменные «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});
      }
    })
  }
 })
}

1 Ответ

0 голосов
/ 15 мая 2018

Так как ваш 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, что, очевидно, не то, чтоты хочешь.Подробнее здесь .

Метод 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.1021 *

Редактировать :

Или (спасибо за напоминание Берги просто используйте callbackProgress(percentage, id).

...