JavaScript函数始终返回undefined：从数据库获取图片名失败排查

尝试从数据库获取图片名称，但调用returnOldFileName函数后始终返回undefined，回调函数内的console.log却能正常输出图片名。相关代码如下：

const returnOldFileName = (id) => {
  let imageName;
  const getQuery = `SELECT image from products WHERE id=${id}`;
  db.query(getQuery, (err, result) => {
    console.log(result.rows[0].image);  // 此处能正常输出结果
    if (result) return result.rows[0].image;
  });
};

const image=returnOldFileName(2)
console.log(image) // 输出undefined

db.query是异步操作，returnOldFileName函数会在异步回调执行前就完成执行，所以默认返回undefined。回调函数里的return只是回调自身的返回值，并不会传递给外层的returnOldFileName函数。

方法1：用Promise封装 + async/await调用 #

将异步操作封装成Promise，调用时用async/await等待结果返回：

const returnOldFileName = (id) => {
  return new Promise((resolve, reject) => {
    // 改用参数化查询避免SQL注入
    const getQuery = `SELECT image from products WHERE id=$1`;
    db.query(getQuery, [id], (err, result) => {
      if (err) reject(err);
      resolve(result?.rows[0]?.image);
    });
  });
};

// 需在async函数内调用
(async () => {
  try {
    const image = await returnOldFileName(2);
    console.log(image);
  } catch (err) {
    console.error('查询出错：', err);
  }
})();

方法2：传入回调函数 #

直接给returnOldFileName传入回调，在异步操作完成后执行回调：

const returnOldFileName = (id, callback) => {
  // 改用参数化查询避免SQL注入
  const getQuery = `SELECT image from products WHERE id=$1`;
  db.query(getQuery, [id], (err, result) => {
    if (err) return callback(err);
    callback(null, result?.rows[0]?.image);
  });
};

// 调用时传入回调处理结果
returnOldFileName(2, (err, image) => {
  if (err) {
    console.error('查询出错：', err);
    return;
  }
  console.log(image);
});

额外提醒 #

不要直接将id拼接进SQL语句，这种写法存在SQL注入风险，上面的示例已经改用参数化查询（$1和参数数组[id]），这是更安全的做法。

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