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

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

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

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

1.返回 Promise, nuxt.js会等待该Promise被解析之后才会设置组件的数据，从而渲染组件.

2.使用  ()

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

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

import axios from 'axios'
const myaxios = axios.create({
  // ...
})
myaxios.interceptors.response.use(function (response) {
  return response.data
}, function (error) {
  // ...
})

export default {
  asyncData ({ params }) {
    return axios.get(`https://my-api/posts/${params.id}`)
      .then((res) => {
        return { title: res.data.title }
      })
  }
}

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 })
      })
  }
}

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

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

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

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

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

在服务器端asyncData时，您可以访问请求的req和res对象。

export default {
  async asyncData ({ req, res }) {
    // 请检查您是否在服务器端
    // 使用 req 和 res
    if (process.server) {
      return { host: req.headers.host }
    }

    return {}
  }
}

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

export default {
  async asyncData ({ params }) {
    const slug = params.slug // When calling /abc the slug will be "abc"
    return { slug }
  }
}

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

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: , 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: , message: 'Post not found' })
      })
  }
}

如果你想定制 Nuxt.js 认的，请参考布局。