Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
172 lines (134 sloc) 5.51 KB
title description
异步数据
Nuxt.js 扩展了 Vue.js,增加了一个叫 `asyncData` 的方法,使得我们可以在设置组件的数据之前能异步获取或处理数据。

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

AsyncData by vueschool

Async Data with Nuxt.js

Learn how to manage asynchronous data with Nuxt.js.

Video courses made by VueSchool to support Nuxt.js developpement.

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)

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

返回 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 context 来了解该对象的所有属性和方法。

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

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

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 默认的错误提示页面,请参考 页面布局