如何在没有 async/await 的情况下使用 getStaticProps？答案

【问题标题】：How to use getStaticProps without async/await?如何在没有 async/await 的情况下使用 getStaticProps？
【发布时间】：2022-11-15 16:09:24
【问题描述】：

作为一个思想实验，也为了加深我对异步编程的理解，我想使用 Next.JS getStaticProps 方法而不使用 aysnc/await 语法。事实上，我想只使用回调来做到这一点。我遇到了麻烦，想知道这是否可能。我想这一定是因为async/await 只是承诺的语法糖，它们本身就是回调地狱的语法糖，对吗？这是我的getStaticProps 函数：

export function getStaticProps() {
    let products;
    let productPath = path.join(process.cwd(), '/data/products.json')

    // the async call
    fs.readFile(productPath, 'utf-8', (err, data) => {
        if (err) throw err;
        products = JSON.parse(data);

    });
    return {
        props: { products }
    }
}

返回值必须是具有props 属性的对象，该属性本身具有要传递给页面组件以进行渲染的数据。我不知道如何仅通过回调来完成此操作。我知道async/await 更直接，但我想再次学习。

【问题讨论】：

"承诺是回调地狱的语法糖" - not exactly。你的函数实际上并没有返回一个承诺，也没有接受回调（next.js 不支持）
async/await 是 promise 的语法糖，这可能就是混淆的来源。

标签： javascript reactjs asynchronous next.js callback

【解决方案1】：

您需要返回承诺，因为您的代码不是同步的。你可以在没有await 的情况下手动创建promise：

export function getStaticProps() {
  let productPath = path.join(process.cwd(), '/data/products.json');

  return new Promise((resolve, reject) => {
    fs.readFile(productPath, 'utf-8', (err, data) => {
      if (err) return reject(err);
      const products = JSON.parse(data);
      resolve({
        props: { products },
      });
    });
  });
}

【讨论】：

不要throw err。拒绝承诺。

【解决方案2】：

我就是这样做的。

   export function getStaticProps() {
        return fetch(
            "myapilink.com/api"
        ).then((response) =>
            response.json().then((data) => {
                return { props: { data } };
            })
        );
    }

【讨论】：