9.7 异步数据

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

asyncData 方法

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

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

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

1. 返回一个Promise, nuxt.js会等待该Promise被解析之后才会设置组件的数据，从而渲染组件.
2. 使用async 或 await(了解更多)
3. 为第二个参数指定一个回调函数. 注：该回调函数需符合通用的 NodeJs 回调函数的形式:callback(err, data)

返回 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 }) {
    let { 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 })
    })
  }
}

返回 对象

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

export default {
  data () {
    return { foo: 'bar' }
  }
}

数据的展示

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

<template>
  <h1>{{ title }}</h1>
</template>

上下文对象

可通过页面数据API来了解该对象的所有属性和方法。

错误处理

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

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

export default {
  asyncData ({ params, error }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'Post not found' })
    })
  }
}

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

export default {
  asyncData ({ params }, callback) {
    axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      callback(null, { title: res.data.title })
    })
    .catch((e) => {
      callback({ statusCode: 404, message: 'Post not found' })
    })
  }
}