Javascript 为什么'；我的诺言还没有解决吗？

我有以下调整图像大小的功能

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}））

，并获得了一个

挂起

状态的承诺，该状态无法解析

我还假设这是由于异食癖造成的。因此，我试图简化函数，但它也不起作用：

// 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;
  });

---

除了列出

onload

之外，您还应该始终为

onerror

添加一个侦听器，因为

图像

可能无法加载

如果您将

console.log

添加到

onerror

回调中，我怀疑您会看到您向一个或多个调用传递了无效的

src

，并且映像无法加载

例如，演示如何连接

onerror

回调（忽略与问题无关的调整大小代码）：

const loadImg=（src）=>新承诺（（解决，拒绝）=>{
const img=新图像（）；
img.onload=（）=>resolve（img）；
img.onerror=（err）=>拒绝（err）；
img.src=src；
});
//这应该会成功
loadImg（'data:image/gif；base64，R0LGodlheaaqaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa(
（）=>console.log（'Image-loaded！'），
（）=>console.log（'Image failed！'），
);
//这将失败
loadImg（'invalid-url'）。然后(
（）=>console.log（“它是如何加载的？”），
（）=>console.log（“那不是图像！”），
);除了列出
onload
之外，您应该始终为
onerror
添加一个侦听器，因为
图像
可能无法加载

如果您将
console.log
添加到
onerror
回调中，我怀疑您会看到您向一个或多个调用传递了无效的
src
，并且映像无法加载

例如，演示如何连接
onerror
回调（忽略与问题无关的调整大小代码）：


const loadImg=（src）=>新承诺（（解决，拒绝）=>{
const img=新图像（）；
img.onload=（）=>resolve（img）；
img.onerror=（err）=>拒绝（err）；
img.src=src；
});
//这应该会成功
loadImg（'data:image/gif；base64，R0LGodlheaaqaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa(
（）=>console.log（'Image-loaded！'），
（）=>console.log（'Image failed！'），
);
//这将失败
loadImg（'invalid-url'）。然后(
（）=>console.log（“它是如何加载的？”），
（）=>console.log（“那不是图像！”），
);这必须起作用。页面上还有其他代码吗？如果调用
onload
处理程序，可能会覆盖
onload
吗？@JonasW。我认为，
onload
不会被覆盖。从my
react调用调整图像大小的函数component@sklingler93好像不是。。。我尝试在
console.log
内部
onload
中执行
console.log（resizeImage（{img，size}））
将始终导致挂起的承诺，这是一个时间问题。尝试一些类似于
resizeImage（{src，size}）的方法。然后（（）=>console.log（“某物”）
就可以了。页面上还有其他代码吗？如果调用
onload
处理程序，可能会覆盖
onload
吗？@JonasW。我认为，
onload
不会被覆盖。从my
react调用调整图像大小的函数component@sklingler93好像不是。。。我尝试在
console.log
内部
onload
中执行
console.log（resizeImage（{img，size}））
将始终导致挂起的承诺，这是一个时间问题。尝试类似于
resizeImage（{src，size}）的方法。然后（（）=>console.log（“某物”）