Vue.js教程
9.7 异步数据
阅读(

Vue.js 基础

Vue.js 过渡和动画

Vue.js 可复用性和组合

Vue.js 工具

Vue.js 模块化

Vue.js 响应式系统原理

Vue.js API

Vue.js 服务器端渲染 SSR

Vue.js 服务端渲染 Nuxt.js

Nuxt.js简介

Nuxt.js安装

Nuxt.js目录结构

Nuxt.js配置

Nuxt.js路由

Nuxt.js视图

Nuxt.js异步数据

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验