异步数据
Nuxt.js 扩展了 Vue.js，增加了一个叫
asyncData的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。
asyncData 方法
asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。
注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。
Nuxt.js 提供了几种不同的方法来使用 asyncData 方法，你可以选择自己熟悉的一种来用：
- 返回一个
Promise, nuxt.js 会等待该Promise被解析之后才会设置组件的数据，从而渲染组件. - 使用 async 或 await (了解更多)
如果您的项目中直接使用了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) {
// ...
}
)
返回 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 })
})
}
}
返回 对象
如果组件的数据不需要异步获取或处理，可以直接返回指定的字面对象作为组件的数据。
export default {
data() {
return { foo: 'bar' }
}
}
数据的展示
asyncData 方法返回的数据在融合 data 方法返回的数据后，一并返回给模板进行展示，如：
<template>
<h1>{{ title }}</h1>
</template>
上下文对象
可通过 API context 来了解该对象的所有属性和方法。
使用 req/res(request/response) 对象
在服务器端调用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 参数改变
默认情况下，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: 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' })
})
}
}
如果你想定制 Nuxt.js 默认的错误提示页面，请参考 页面布局。
