异步数据

Nuxt.js 扩展了 Vue.js,增加了一个叫 asyncData 的方法,使得我们可以在设置组件的数据之前能异步获取或处理数据。

asyncData 方法

asyncData方法会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候,第一个参数被设定为当前页面的上下文对象,你可以利用 asyncData方法来获取数据,Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。

注意:由于asyncData方法是在组件 初始化 前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象。

Nuxt.js 提供了几种不同的方法来使用 asyncData 方法,你可以选择自己熟悉的一种来用:

  • 返回一个 Promise, nuxt.js会等待该Promise被解析之后才会设置组件的数据,从而渲染组件.
  • 使用 async 或 await (了解更多)

我们使用 axios 重构 HTTP 请求, 我们 强烈建议您 使用我们的 axios 模块 用于您的Nuxt项目中。

如果您的项目中直接使用了node_modules中的axios,并且使用axios.interceptors添加拦截器对请求或响应数据进行了处理,确保使用 axios.create创建实例后再使用。否则多次刷新页面请求服务器,服务端渲染会重复添加拦截器,导致数据处理错误。

  1. import axios from 'axios'
  2. const myaxios = axios.create({
  3. // ...
  4. })
  5. myaxios.interceptors.response.use(function (response) {
  6. return response.data
  7. }, function (error) {
  8. // ...
  9. })

返回 Promise

  1. export default {
  2. asyncData ({ params }) {
  3. return axios.get(`https://my-api/posts/${params.id}`)
  4. .then((res) => {
  5. return { title: res.data.title }
  6. })
  7. }
  8. }

使用 async或await

  1. export default {
  2. async asyncData ({ params }) {
  3. const { data } = await axios.get(`https://my-api/posts/${params.id}`)
  4. return { title: data.title }
  5. }
  6. }

使用 回调函数

  1. export default {
  2. asyncData ({ params }, callback) {
  3. axios.get(`https://my-api/posts/${params.id}`)
  4. .then((res) => {
  5. callback(null, { title: res.data.title })
  6. })
  7. }
  8. }

返回 对象

如果组件的数据不需要异步获取或处理,可以直接返回指定的字面对象作为组件的数据。

  1. export default {
  2. data () {
  3. return { foo: 'bar' }
  4. }
  5. }

数据的展示

asyncData 方法返回的数据在融合 data 方法返回的数据后,一并返回给模板进行展示,如:

  1. <template>
  2. <h1>{{ title }}</h1>
  3. </template>

上下文对象

可通过 API context 来了解该对象的所有属性和方法。

使用 req/res(request/response) 对象

在服务器端调用asyncData时,您可以访问用户请求的reqres对象。

  1. export default {
  2. async asyncData ({ req, res }) {
  3. // 请检查您是否在服务器端
  4. // 使用 req 和 res
  5. if (process.server) {
  6. return { host: req.headers.host }
  7. }
  8. return {}
  9. }
  10. }

访问动态路由数据

您可以使用注入asyncData属性的context对象来访问动态路由数据。例如,可以使用配置它的文件或文件夹的名称访问动态路径参数。所以,如果你定义一个名为_slug.vue的文件,您可以通过context.params.slug来访问它。

  1. export default {
  2. async asyncData ({ params }) {
  3. const slug = params.slug // When calling /abc the slug will be "abc"
  4. return { slug }
  5. }
  6. }

监听 query 参数改变

默认情况下,query的改变不会调用asyncData方法。如果要监听这个行为,例如,在构建分页组件时,您可以设置应通过页面组件的watchQuery属性监听参数。了解更多有关API watchQuery的信息。

错误处理

Nuxt.js 在上下文对象context中提供了一个 error(params) 方法,你可以通过调用该方法来显示错误信息页面。params.statusCode 可用于指定服务端返回的请求状态码。

以返回 Promise 的方式举个例子:

  1. export default {
  2. asyncData ({ params, error }) {
  3. return axios.get(`https://my-api/posts/${params.id}`)
  4. .then((res) => {
  5. return { title: res.data.title }
  6. })
  7. .catch((e) => {
  8. error({ statusCode: 404, message: 'Post not found' })
  9. })
  10. }
  11. }

如果你使用 回调函数 的方式, 你可以将错误的信息对象直接传给该回调函数, Nuxt.js 内部会自动调用 error 方法:

  1. export default {
  2. asyncData ({ params }, callback) {
  3. axios.get(`https://my-api/posts/${params.id}`)
  4. .then((res) => {
  5. callback(null, { title: res.data.title })
  6. })
  7. .catch((e) => {
  8. callback({ statusCode: 404, message: 'Post not found' })
  9. })
  10. }
  11. }

如果你想定制 Nuxt.js 默认的错误提示页面,请参考 页面布局