回报活动承诺

Question

问题陈述

我想在用户放到 dropZone 时上传一些图像。我正在做的是将它们上传到服务器，然后返回承诺执行进一步的操作，例如隐藏 dropZone、显示成功消息并将用户移至下一步。

var promise = new Promise(function(resolve, reject) {
    dropZone.addEventListener('drop', function(event) {
      /* ajax call */
      resolve(value);
    });
  });

我面临的问题是，如果用户两次删除文件，则删除事件会触发两次，并且承诺正在尝试解决已经解决的承诺。

每次事件发生时我都想返回一个新的承诺。

Answer 1

在活动中返回承诺，例如

dropZone.addEventListener('drop', function(event) {
   return new Promise(function(resolve, reject) {
     /* ajax call */
     resolve(value);
   });
});

Answer 2

如果您在函数内调用 Promise，请确保您没有频繁调用该函数，正如我所见，如果您多次调用 Promise，则 drop

event

会在 Promise 中重复创建。如果您想多次调用函数，请删除事件监听器并重新添加。

您可以简单地使用 async/await 进行 ajax 调用。

  dropZone.addEventListener('drop', async function(event) {
    try {
       const response = await doFileUploadHere()
       return response;
    } catch(err) {
       console.log('error while uploading the files', err)
    }
  });

Answer 3

如果此问题的根源是在事件之外返回控制权，这可能会有所帮助。

(() => {
  let dropZoneListner = (callback) => {
    dropZone.addEventListener('drop', function(event) {
      /* code to obtain value */
      callback(value);
    });
  }
  dropZoneListner((dropValue) => {
    /* ajax call, new Promise, ... */
  });
})();