使用 promise 和 pouch 调整图像大小

Question

我之前问过这个问题，并尝试根据一些答案对其进行更改，但仍然对 promise 有疑问。

这实际上是多个承诺，但主要问题是我正在调用 pouch.get 来获取图像列表。然后我通过一个 for/loop 创建一些标记（如果我没有调整大小的承诺代码，它可以正常工作）。我正在尝试创建一堆缩略图图像以网格形式显示在手机上。

我承诺调整大小的代码在去调整另一个图像大小之前尝试完成调整大小。但它最终只为最后一张图片执行了一个 onload 事件，仅此而已。

发生的情况是，对于每个循环，它都会进入调整大小，设置 onload 事件，将 url 复制到图像然后跳出并执行下一个循环，并且直到最后一个循环才会触发 onload 事件（图像），它显示在屏幕上。

我的调整大小承诺：

function resizeImageToImgPromise(showImage, maxWidth, maxHeight, url) {
   // Set img src to ObjectURL

   return new Promise(function (resolve, reject) {
      var test;
      test = 'test';
      showImage.onload = function () {
     URL.revokeObjectURL(this.src);
     var canvas = document.createElement("canvas");
     var ctx = canvas.getContext("2d");


   ... removed code to make it easier to read and not germane to the issue

     showImage.src = canvas.toDataURL("image/png");
     showImage.width = width;
     showImage.height;
     showImage.style.display = "inline";
     showImage.style.margin = "10px"

     resolve();
      }

      showImage.src = url;
   })
}

这是在 for 循环中调用它的 Promise：

function readAllImagesFromPouch(id, imageDisplay) {

   return new Promise(function (resolve, reject) {

      var startElement = document.getElementById(imageDisplay);
      var image = "";
      var imgBlob;
      var base64str;

      // Get all attachments for this id

      DB_TaskImages.get(id, { attachments: true }).then(function (doc) {

     for (var key in doc._attachments) {
        var img = document.createElement('img');
        base64str = doc._attachments[key].data;
        blobUtil.base64StringToBlob(base64str).then(function (myBlob) {
           console.log();
           return blobUtil.createObjectURL(myBlob);
        }).then(function (myUrl) {

           img.src = myUrl;

           resizeImageToImgPromise(img, "100", "60", myUrl).then(function () {

          $(startElement).append(img.outerHTML);                              return;
           }).catch(function () {    // this is the catch for the resize
          alert("this is an error");
           })
        }).catch(function (err) {   // this is the catch for the blobUtil
           // error
        });
     }
     return;
      }).then(function () {
     resolve();
      }).catch(function (err) {      // this is the catch for the DB_TaskImages.get
     reject(err);
      })
   });         // end of promise
}

这最初是从以下位置调用的：

    readAllImagesFromPouch("006", "divImages").then(function () {
    }).catch(function (err) {
       console.log("In catch for readAllImagesFromPouch with err: " + err);
    })

Answer 1

首先，避免使用 Promise 构造函数反模式。由于DB_TaskImages.get 返回一个promise，你不需要将代码包装在一个中

其次，您的 for...in 循环启动了一堆异步任务 - 但您实际上并没有等待它们完成

此代码将遍历doc._attachments 并以“并行”方式执行resize - 只有在所有调整大小完成后才会显示调整大小的图像

function readAllImagesFromPouch(id, imageDisplay) {
    var startElement = document.getElementById(imageDisplay);
    return DB_TaskImages.get(id, {
        attachments: true
    }).then(function(doc) {
        return Promise.all(Object.keys(doc._attachments)
            .map(function(key) {
                var base64str = doc._attachments[key].data;
                return blobUtil.base64StringToBlob(base64str)
                .then(blobUtil.createObjectURL)
                .then(function(myUrl) {
                    return resizeImageToImgPromise("100", "60", myUrl);
                });
            })
        );
    }).then(function(images) {
        images.forEach(function(img) {
            $(startElement).append(img.outerHTML);
        });
    });
}

注意：没有进行错误处理，因此任何时候的任何错误都将导致不显示图像