nuxt.js1-8

asyncData方法获取数据

　　在项目中须要在初始化页面前先获得数据，也就是咱们常说的异步请求数据。Nuxt.js贴心的为咱们扩展了Vue.js的方法，增长了anyncData。从名字上就很好理解，这是一个一部的方法。

　建立远程数据

　　在这里制做一些假的远程数据，我选择的网站是myjson.com，它是一个json的简单仓库，学习使用是很是适合的。
　　咱们打开网站，在对话空中输入JSON代码，这个代码能够本身随意输入哦。

　　输入后，网站会给你一个地址，这就是你这个JSON仓库的地址了。

https://api.myjson.com/bins/8gdmr

　安装Axios

　　Vue.js官方推荐使用的远程数据获取方式就Axios，因此咱们安装官方推荐，来使用Axios。这里咱们使用npm 来安装 axios。
　　直接在终端中输入下面的命令：

npm install axios --save

　ansycData的promise方法

　　咱们在pages下面新建一个文件，叫作ansyData.vue。
　　而后写入下面的代码：

<template>
  <div>
      <h1>姓名：{{info.name}}</h1>
      <h2>年龄：{{info.age}}</h2>
      <h2>兴趣：{{info.interest}}</h2>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data(){
     return {
         name:'hello World',
     }
  },
  asyncData(){
      return axios.get('https://api.myjson.com/bins/8gdmr')
      .then((res)=>{
          console.log(res)
          return {info:res.data}
      })
      
  }
}
</script>

　　这时候咱们能够看到，浏览器中已经能输出结果了。

　ansycData的await方法

　　固然上面的方法稍显过期，如今都在用ansyc…await来解决异步,改写上面的代码。

<template>
  <div>
      <h1>姓名：{{info.name}}</h1>
      <h2>年龄：{{info.age}}</h2>
      <h2>兴趣：{{info.interest}}</h2>
 
     
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data(){
     return {
         name:'hello World',
     }
  },
  async asyncData(){
      let {data}=await axios.get('https://api.myjson.com/bins/8gdmr')
      return {info: data}
      
  }
}
</script>