Axios 可以在新的 next.js 13 中使用，而不是扩展的 next fetch api 版本吗？

Question

1. 大家好，我可以将 axios 与 next.js 13 一起使用，并且仍然获得带有缓存和重新验证配置的扩展 fetch api 版本的相同结果吗？

2. axios 会走向这个网络标准的方向吗？

3. 我真的很喜欢 axios.intereceptors 功能，我应该使用下一个中间件吗？

能给我 2 美分吗？

My first stackoverflow question, even coding for 2 years (still) ... please vote up so I can unlock the mid dev super powers tks

`export default async function Page() {
  // revalidate this data every 10 seconds at most
  const res = await **axios.get**('https://...', { next: { revalidate: 10, cache: 'force-cache' .... } });
  const data = res.json();
  // ...
}

// does axios setup the config correctly ?

Answer 1

如果您查看有关“数据获取 > 缓存”的文档，他们会对 React cache() 包装器进行评论。这是您应该在服务器端组件上缓存其他库或数据获取过程的一种方式，例如：

// On getSome.js

export const getSome = cache( async() => {
    const res = await axios.get('https://...', otherAxiosConfigObject);
    const data = res.json();
    return data;
})


// On Page (or component)

export const revalidate = 10; //revalidate every 10 seconds

export default async function Page() {
  const someData = await getSome();
}

通过这种方法，您可以在任何组件中调用 getSome() 异步函数，并且 NextJS 在构建时应用重复数据删除，仅执行一次获取过程。

Answer 2

根据文档，目前无法使用 axios 通过传递与 fetch API 相同的参数来重新验证数据。

尽管如此，还是有一个临时解决方案可供使用。您可以将以下行添加到文件顶部：

export const revalidate = 3600;  // revalidate every hour

执行此操作后，您的所有请求都将在一段时间后重新验证。请记住，这只是一个临时解决方案，缺乏 fetch API 的效率。

看起来Next.js打算在未来实现第三方服务的缓存和重新验证配置。但截至目前，该功能尚不可用。

我强烈建议您参阅 Next.js 文档以了解更多详细信息： https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#data-fetching-without-fetch