调用含callback参数的函数时如何将回调返回值正确赋值给变量

原因说明 #

• 你的getMeta函数本身没有写显式的return语句，JavaScript中无显式return的函数执行后默认返回undefined，你赋值给test变量的就是这个默认返回值，和回调函数内部的return没有任何关联。
• 图片加载是异步操作：调用getMeta时，代码只会同步执行「创建Image实例、赋值src、绑定onload事件」这几步，之后getMeta就直接执行结束了，此时图片还没加载完成，onload事件还没触发，你写的回调函数根本还没执行。就算后续回调执行了，回调里的return也只会把值返回给onload事件处理程序，不会返回到外层getMeta的调用位置。

解决方法 #

方案1：保持回调逻辑，把使用返回值的代码放到回调内部 #

不要尝试在同步代码中拿异步结果，直接把需要用到尺寸的逻辑都写在回调里：

getMeta(
  i_url,
  function(width, height) {
    const test = width + 'px ' + height + 'px'
    alert(test)
    // 所有需要用到test的后续逻辑都写在这里
  }
);

方案2：封装为Promise，适配现代JS的异步写法 #

先改写getMeta返回Promise实例，同时补充错误处理逻辑：

function getMeta(url) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.src = url
    img.onload = () => resolve(`${img.width}px ${img.height}px`)
    img.onerror = reject // 图片加载失败时抛出错误，避免Promise永久等待
  })
}

调用时有两种常用写法：

用.then链式调用：

getMeta(i_url).then(test => {
  alert(test)
  // 后续逻辑写在这里
}).catch(err => {
  console.error('图片加载失败', err)
})

用async/await语法（需要在async标记的函数内使用）：

async function handleImgSize() {
  try {
    const test = await getMeta(i_url)
    alert(test)
    // 后续逻辑写在这里
  } catch (err) {
    console.error('图片加载失败', err)
  }
}
handleImgSize()

内容的提问来源于stack exchange，提问作者jasonmzx