Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。
asyncData 方法
Nuxt.js 提供了几种不同的方法来使用 asyncData 方法，你可以选择自己熟悉的一种来用：
- 返回一个 Promise, nuxt.js 会等待该Promise被解析之后才会设置组件的数据，从而渲染组件.
- 使用 async 或 await
- 使用 回调函数
//返回Promise
export default {asyncData({ params }) {return axios.get(`https://my-api/posts/${params.id}`).then(res => {return { title: res.data.title }})}
}
//使用 async 或 await
export default {async asyncData({ params }) {const { data } = await axios.get(`https://my-api/posts/${params.id}`)return { title: data.title }}
}
//使用 回调函数
export default {asyncData({ params }, callback) {axios.get(`https://my-api/posts/${params.id}`).then(res => {callback(null, { title: res.data.title })})}
}
使用 asyncData 获取异步数据的示例：
// pages/some-page.vueexport default {async asyncData(context) {// 可以访问上下文对象，例如从上下文获取请求头或传递的数据// context.req, context.res, context.params, context.query// 请检查您是否在服务器端//1、 使用 req 和 resif (process.server) {return { host: req.headers.host }}//2、访问动态路由数据//您可以使用注入asyncData 属性的context对象来访问动态路由数据。//例如，可以使用配置它的文件或文件夹的名称访问动态路径参数。//所以，如果你定义一个名为_slug.vue的文件，//您可以通过context.params.slug来访问它。 const slug = context.params.slug // When calling /abc the slug will be "abc"return { slug }//3、监听 query 参数改变// 默认情况下，query 的改变不会调用asyncData方法。如果要监听这个行为，//例如，在构建分页组件时，您可以设置应通过页面组件的watchQuery属性监听参数。export default {watchQuery: ['page']}// 调用 API 获取数据const dataFromApi = await fetchDataFromApi();// 返回的数据会作为组件的属性return {dataFromApi};}
}
使用生命周期钩子获取异步数据
如果你只需要在客户端获取数据，或者想要在组件的其它生命周期钩子中处理数据，你可以使用 Vue 的生命周期钩子，如 created 或 mounted。
// components/SomeComponent.vueexport default {data() {return {dataFromApi: null};},async created() {this.dataFromApi = await this.fetchDataFromApi();},methods: {async fetchDataFromApi() {// 调用 API 获取数据// 这里可以使用 axios, fetch 等 HTTP 客户端const response = await fetch('https://api.example.com/data');const data = await response.json();return data;}}
}
客户端导航和数据保持
如果你的应用支持客户端路由导航，并且你希望在客户端导航时保持异步数据，你可以使用 Nuxt.js 的 beforeRouteUpdate 钩子：
export default {// ... 省略其他代码 ...beforeRouteUpdate(to, from, next) {if (to.path !== from.path) {this.fetchDataFromApi().then(data => {this.dataFromApi = data;});}next();}
}
)
