Astro项目中两种数据获取方式的行为差异原因

代码场景回顾 #

方式一：每次调用函数获取数据 #

api.js 代码：

//api.js
export const fetchKnowledgeBases = async () => {
    const response = await fetch(`${API_BASE_URL}/accounts/${accountId}/knowledge-bases/${kbId}`)
    if (!response.ok) {
        throw new Error('Failed to fetch knowledge bases')
    }
    await sleep(7000)
    const data = await response.json()
    return data
}

const knowledgeBase = await fetchKnowledgeBases()

export {knowledgeBase}

index.astro 代码：

---
import {fetchKnowledgeBases} from '../../../services/api'

const a = await fetchKnowledgeBases()
console.log(a)
---

<Homepage />

这种方式下，页面刷新时数据获取耗时7秒。

方式二：直接导入预获取的缓存数据 #

修改后的 index.astro 代码：

---
import {knowledgeBase} from '../../../services/api'

console.log(knowledgeBase)
---

<Homepage />

这种方式下，页面刷新瞬间加载数据，仅在执行npm run dev时获取一次数据，后续刷新用缓存。

行为差异原因 #

• 方式一：每次页面刷新都会重新执行数据请求
  Astro组件的前置代码块（---包裹的部分）在每次页面请求/刷新时都会重新执行。当你导入fetchKnowledgeBases函数并调用它时，每次刷新都会触发新的fetch请求，加上强制的7秒sleep等待，自然每次都要等7秒才能拿到数据。

• 方式二：模块级别的数据预获取，结果被缓存
  在api.js中，const knowledgeBase = await fetchKnowledgeBases()属于模块顶层的异步代码。Node.js（Astro的开发/构建环境基于Node.js）会在模块第一次被导入时执行这段代码，然后将导出的knowledgeBase结果缓存起来。后续任何地方再次导入这个模块时，都会直接复用已缓存的结果，不会重新执行数据请求和等待逻辑——这就是为什么你只有在启动npm run dev时会触发一次请求，之后刷新页面都是瞬间加载缓存好的数据。

内容的提问来源于stack exchange，提问作者Nghĩa Phạm