Nuxt.js学习(八) --- 异步数据

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

[TOC]

1、异步数据

1.1、官方文档：

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

asyncData 方法

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

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

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

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

我们使用[axios]重构HTTP请求,我们强烈建议您使用[axios模块]用于您的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) {
  // ...
})

返回 Promise

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

1.2、实际操作(练习实例)

1.2.1、安装Axios

既然Vue.js官方推荐使用的远程数据获取方式是axios，就按官方推荐，来使用Axios，使用npm来安装axios

npm install axios --save

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

错误处理

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

创建远程数据

{
  "name": "庭前云落",
  "age": 18,
  "temp": "I love java!"
}

输入后会拿到一个地址，就是你刚刚输入的数据请求地址

https://api.myjson.com/bins/1bqqsw

首先确认你安装了Axios，没有输入以下命令安装

npm install axios --save

ansycData.vue

<template>
  <div>
    <h1>姓名：{{info.name}}</h1>
    <h2>年龄:{{info.age}}</h2>
    <h2>简介：{{info.temp}}</h2>
  </div>
</template>

<script>
import axios from 'axios'
export default {
   data() {
     return {
      name:"111"
     }
   },
  async asyncData(){
  let{data} =await axios.get('https://api.myjson.com/bins/1bqqsw')
   return {info:data}
   } 
};
</script>

<style>
</style>