Node+Fastify环境下，Handlebars展示API Promise返回数据失败求助

问题场景 #

在Node.js+Fastify环境中，尝试通过Handlebars自定义助手调用外部API获取数据并渲染到模板时，控制台能打印出正确的API返回结果，但模板无法展示数据，且助手返回Promise { undefined }。

相关代码片段 #

模板调用代码：

value="{{fetchClass this.CERTIFICATION}}"

最初的助手注册与API调用函数：

// 自定义助手注册
Handlebars.registerHelper('fetchClass', async function(str) {
  try {
    const response = await fetchClassification(str);
    console.log('Response: ', response);
    return response;
  } catch (error) {
    console.error('Error fetching classification:', error);
  }
});

// API请求函数
async function fetchClassification(parameter) {
  fetch(`https://api.example.com/dictionary/CERTIFICATION/${parameter}`)
      .then(response => response.json())
      .then(data => {
        const classification = data.meaning.classification;
        return classification;
      })
      .catch(error => console.error('Error fetching data:', error));
}

后续尝试将API逻辑直接写入助手的代码：

Handlebars.registerHelper('fetchClass', function(str) {
  fetch(`https://api.example.com/dictionary/CERTIFICATION/${str}`)
      .then(response => response.json())
      .then(data => {
        const classification = data.meaning.classification;
        console.log('Class: ', classification);
        if (classification) {
          return classification;
        }
      })
      .catch(error => console.error('Error fetching data:', error));
});

错误原因 #

1. fetchClassification函数未返回Promise：
   虽然标记了async关键字，但函数内部没有返回fetch调用生成的Promise链，导致await fetchClassification(str)得到undefined，最终助手返回Promise { undefined }。

2. 助手未返回异步操作的Promise：
   第二种写法中，助手函数没有返回fetch的Promise链，Handlebars在渲染模板时无法等待异步操作完成，模板渲染结束后才拿到API数据，自然无法展示。

修复方案 #

方案1：用async/await规范实现API调用与助手 #

统一使用async/await语法，确保函数返回正确的Promise：

// 修复后的API请求函数
async function fetchClassification(parameter) {
  try {
    const response = await fetch(`https://api.example.com/dictionary/CERTIFICATION/${parameter}`);
    const data = await response.json();
    return data.meaning.classification;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error; // 抛出错误让外层助手捕获处理
  }
}

// 保持async助手写法
Handlebars.registerHelper('fetchClass', async function(str) {
  try {
    return await fetchClassification(str);
  } catch (error) {
    console.error('Error fetching classification:', error);
    return ''; // 出错时返回空值避免模板显示异常
  }
});

方案2：直接返回Promise链 #

如果偏好使用then/catch语法，需确保助手返回完整的Promise链：

Handlebars.registerHelper('fetchClass', function(str) {
  return fetch(`https://api.example.com/dictionary/CERTIFICATION/${str}`)
    .then(response => response.json())
    .then(data => data.meaning.classification)
    .catch(error => {
      console.error('Error fetching data:', error);
      return ''; // 出错时返回默认值
    });
});

注意事项 #

Fastify集成Handlebars时，需确保使用的模板渲染插件（如@fastify/view）支持异步助手，目前主流版本均已支持该特性。

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