将 promise 解析为 addEventListener [英] Resolve promise into addEventListener

问题描述

我实际上正在开发一个文本编辑器，但遇到了有关图像上传和显示方法的问题.

I'm actually developping a text editor and just got stuck with an issue regarding the image upload and display method.

我想要达到的目标

点击工具栏中的按钮，应用程序会显示一个弹出窗口上传图片.然后用户可以拖放文件或单击并通过他的文件系统选择文件.图像完成后选择后，我通过 ajax 将它发送到服务器，然后上传它将其存储在一个文件夹中.完成后，服务器发送响应文件没问题，可以使用了.然后该函数解析并编辑器添加了图片的正确链接.

On the click of a button in the toolbar, the app displays a pop-up for uploading a picture. The user can then drag'n drop the file or click and select the file through his file system. After the image is selected, I send it to the server through ajax which uploads it and store it in a folder. Once this is done, the server sends a response that the file is ok and ready tu use. The function then resolves and the editor adds the proper link to the image.

我尝试了一些在 Promise 中附加事件侦听器时有效的方法.

I tried something that worked while attaching event listeners in the promise.

function uploadImage(editor) {
  /* Displays the pop-up */
  uploadView.style.display = "block";

  var promise = new Promise(function(resolve, reject) {

    uploadInput.addEventListener('change', function(event) {
      /* ajax call */
      resolve(value);
    });
    dropZone.addEventListener('drop', function(event) {
      /* ajax call */
      resolve(value);
    });

  });

  promise.then(function(result) {
    /* Adds the link */
  }, function(err) {
    /* handles errors */
  });
}

一切都很好，但是每次触发该函数时，都会附加一个新的侦听器，并且每次新点击时，里面的函数都会再次运行一次...

It's all good, but everytime you trigger the function, a new listener is attached and the function inside runs another time per new click...

然后我想我可能会在承诺解决后删除监听器.但是，为了做到这一点，我不能使用匿名函数，但是我不能在内部使用我的解析方法，因为它会引发错误.

I then thought I might remove the listeners after the promise resolves. However, in order to do so, I can't make use of anonymous functions but then I can't use my resolve method inside as it throws an error.

这不起作用:

function uploadImage(editor) {
  /* Displays the pop-up */
  uploadView.style.display = "block";

  var promise = new Promise(function(resolve, reject) {

    uploadInput.addEventListener('change', handleUpload);
    dropZone.addEventListener('drop', handleUpload);

  });

  promise.then(function(result) {
    /* Adds the link */
    /* Removes the listeners */
    uploadInput.removeEventListener('change', handleUpload);
    dropZone.removeEventListener('drop', handleUpload);

  }, function(err) {
    /* Handles errors */
    /* Removes the listeners */
    uploadInput.removeEventListener('change', handleUpload);
    dropZone.removeEventListener('drop', handleUpload);
  });
}

function handleUpload(event) {
  if (event.type == "change") {
    /* ajax call */
    resolve(value); // Throws an error
  } else {
    /* ajax call */
    resolve(value); // Throws an error
  }
}

我的想法不多了...

推荐答案

为了做到这一点，我不能使用匿名函数，但我不能在里面使用我的解析方法

in order to do so, I can't make use of anonymous functions but then I can't use my resolve method inside

在命名函数或将它们转换为声明时，没有理由将函数移到 uploadImage 函数或 new Promise 回调之外:

There's no reason to move the function(s) outside of the uploadImage function or the new Promise callback when naming them or converting them to declarations:

var promise = new Promise(function(resolve, reject) {
  function handleUpload(event) {
    /* Removes the listeners */
    uploadInput.removeEventListener('change', handleUpload);
    dropZone.removeEventListener('drop', handleUpload);
    resolve(event); // works just fine
  }
  uploadInput.addEventListener('change', handleUpload);
  dropZone.addEventListener('drop', handleUpload);
});

promise.then(function(event) {
  if (event.type == "change") {
    return /* ajax call */
  } else {
    return /* other ajax call */
  }
}).then(function(result) {
  /* Adds the link */
}, function(err) {
  /* Handles errors */
});

这篇关于将 promise 解析为 addEventListener的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！