Nuxt.js anyncData方法獲取數據

在項目中需要在初始化頁面前先得到數據，也就是我們常說的異步請求數據。Nuxt.js貼心的爲我們擴展了Vue.js的方法，增加了anyncData。從名字上就很好理解，這是一個異步的方法。

創建遠程數據
在這裏製作一些假的遠程數據，我選擇的網站是myjson.com，它是一個json的簡單倉庫，學習使用是非常適合的。我們打開網站，在對話框中輸入JSON代碼，這個代碼可以自己隨意輸入哦。

{
  "name": "名字",
  "age": 18,
  "interest": "I love coding!"
}

輸入後，網站會給你一個地址，這就是你這個JSON倉庫的地址了。
https://api.myjson.com/bins/g5whc

安裝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',
        }
    },
    async asyncData(){
        console.log(await axios.get('https://api.myjson.com/bins/1dkbio'))
        let {data} = await axios.get('https://api.myjson.com/bins/1dkbio')
        return {info:data}
    }
}
</script>