javascript - 为什么我的 promise 没有兑现？

Question

我有以下调整图像大小的函数。

promise 应该在我的代码的 onload 部分中解析，但由于某种原因它没有......

import Pica from 'pica';

const pica = new Pica();

export default ({ src, size }) =>
  new Promise((resolve, reject) => {
    const [width, height] = size.split('x');
    const from = new Image();
    const to = document.createElement('canvas');
    const options = {
      width,
      height,
    };

    from.onload = async () => {
      try {
        const canvas = await pica.resize(from, to, options);
        resolve(canvas);
      } catch (e) {
         reject(e);
      }
    };

    from.src = src;
  });

我使用此函数来获取一个图像的不同大小版本的数组。我使用 Promise.all() 来实现此目的。

这是我调用此函数的代码:

    ...
    const img = ...
    sizes.map(size => {
      promisesArray.push(resizeImage({ img, size }));
    });

    Promise.all(promisesArray).then(data => console.log(data))

我尝试过 console.log(resizeImage({ img, size }))，并得到了无法解析的 pending 状态的 promise 。

我还假设这是由于 Pica 造成的。于是我尝试简化一下功能，但也没成功:

// no extra code
export default ({ src, size }) =>
  new Promise((resolve, reject) => {    
    const from = new Image();

    from.onload = () => {
      // what's wrong here?
      resolve('hello');
    };

    from.src = src;
  });

Answer 1

除了列出 onload 之外，您还应该始终为 onerror 添加监听器，因为 Image 可能无法加载。

如果您将 console.log 添加到 onerror 回调中，我怀疑您会发现您传入了无效的 src您的一个或多个调用导致图像加载失败。

作为演示如何连接 onerror 回调的示例(忽略与您的问题无关的调整大小代码):

const loadImg = (src) => new Promise((resolve, reject) => {
  const img = new Image();

  img.onload = () => resolve(img);
  img.onerror = (err) => reject(err);

  img.src = src;
});

// This should succeed
loadImg('data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7').then(
  () => console.log('Image loaded!'),
  () => console.log('Image failed!'),
);

// This will fail
loadImg('invalid-url').then(
  () => console.log("How did that load?"),
  () => console.log("That wasn't an image!"),
);