提问人：Danilo-Guedes 提问时间：5/16/2023 最后编辑：Chris GerglerDanilo-Guedes 更新时间：10/6/2023 访问量：14568
Axios 可以在新的 next.js 13 中使用，而不是扩展的 next fetch api 版本吗？
Can Axios be used in new next.js 13 instead of extended next fetch api version?
问：
嘿，伙计们，我可以将 axios 与 next.js 13 一起使用，并且仍然使用缓存和重新验证配置获得其扩展获取 api 版本的相同结果吗？
axios 会朝着这个 Web 标准的东西方向发展吗？
我真的很喜欢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 ?
答：
3赞
Brukols
5/24/2023
#1
根据文档，目前无法使用 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
4赞
Miguel A. Díaz Castillo
7/21/2023
#2
如果你查看了关于“数据获取>缓存”的文档，他们会评论 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 在构建时应用重复数据删除，只执行一个 fetch 过程。
评论