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>