nuxt2入门（4）- asyncData

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情

关于nuxt.js的异步获取数据，可以直接进入nuxt.js官网异步数据介绍文档，本文也会详细记录。

asyncData方法

在渲染组件之前，异步的获取数据

会在服务、路由更新之前被调用

在每次页面组件被加载、渲染之前就调用了

基本用法

前提，基于axios获取数据 nuxt.js提供了以下的方法来使用asyncData方法，可以选择任意一种来使用：

1. 返回一个 Promise, nuxt.js 会等待该Promise被解析之后才会设置组件的数据，从而渲染组件.
2. 使用async 或 await

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

使用promise

import axios from 'axios'
export default{
  asyncData(){
    return axios({ 
       method:'get',
       url:'https://xxx'
    }).then(_data=>{
      return {data: _data.data}
    })
  }
}

使用async或await

import axios from 'axios'
export default{
 async asyncData(){
    return await axios({ 
       method:'get',
       url:'https://xxx'
    }).then(_data=>{
      return {data: _data.data}
    })
  }
}

上下文对象

• 在服务器端调用asyncData时，可以访问用户请求的req和res对象。
• 可以使用注入asyncData 属性的context对象来访问动态路由数据。

• Nuxt.js 在上下文对象context中提供了一个 error(params) 方法，你可以通过调用该方法来显示错误信息页面。

那么，如何定制错误信息页面呢？

自定义错误提示信息页面

首先，新建文件夹根目录下面/layouts/error.vue

props:['error'] 接受错误信息

页面传递

如下代码所示：

async asyncData(ctx){
return await new Promise((resolve,reject)=>{
   setTimeout({(_data)=>{
      reject({
        data:{
          message:'xxx'
        }
      });
      ctx.error({
         message:"报错啦 "
      })
   },5000)
})
}

具体了解更多页面布局，可以查看nuxt.js布局文档