Gatsby的onPostBuild生命周期中Axios请求未触发回调如何解决？

核心原因 #

Gatsby的onPostBuild生命周期钩子需要你主动返回异步任务对应的Promise，才会等待异步逻辑执行完成后再结束该钩子流程。你当前的代码只是发起了axios异步请求但没有返回对应的Promise，Gatsby会将该钩子判定为同步任务，发起请求后直接标记钩子执行完成，构建进程直接退出，还在pending状态的HTTP请求被强制中断，因此所有then/catch回调都不会被触发，自然看不到3、4、5的日志输出。

修复方法 #

修改代码返回异步Promise即可，以下两种写法都可：

// 写法1：直接返回axios生成的Promise
exports.onPostBuild = () => {
  console.info(`console.log => 1`);
  const postSlugs = require('./content/post-slugs.json');
  const siteConfig = require('./gatsby-config');
  const siteUrl = siteConfig.siteMetadata.siteUrl.replace(/\/$/, '');
  console.info(`console.log => 2`);
  // 新增return返回Promise
  return axios.get(`https://graph.facebook.com/v11.0/?id=${siteUrl}${postSlugs[0]}&access_token=xxxxxx&fields=engagement`)
      .then(res => {
        console.info(`console.log => 3`);
        console.log(JSON.stringify(res));
      })
      .catch(err => {
        console.info(`console.log => 4`);
        console.log(JSON.stringify(err));
      })
      .then(() => {
        console.info(`console.log => 5`);
      })
      .finally(() => {
        console.info(`console.log => 6`);
      });
};

// 写法2：async/await语法，代码可读性更高
exports.onPostBuild = async () => {
  console.info(`console.log => 1`);
  const postSlugs = require('./content/post-slugs.json');
  const siteConfig = require('./gatsby-config');
  const siteUrl = siteConfig.siteMetadata.siteUrl.replace(/\/$/, '');
  console.info(`console.log => 2`);
  try {
    const res = await axios.get(`https://graph.facebook.com/v11.0/?id=${siteUrl}${postSlugs[0]}&access_token=xxxxxx&fields=engagement`);
    console.info(`console.log => 3`);
    console.log(JSON.stringify(res));
  } catch (err) {
    console.info(`console.log => 4`);
    console.log(JSON.stringify(err));
  }
  console.info(`console.log => 5`);
  console.info(`console.log => 6`);
};

补充说明 #

如果后续需要批量拉取多篇博文的FB数据，记得把所有请求生成的Promise用Promise.all包裹后再返回，避免出现部分请求未执行完成就结束构建的问题。

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