在專案中需要在初始化頁面前先得到資料，也就是我們常說的非同步請求資料。Nuxt.js貼心的為我們擴充套件了Vue.js的方法，增加了asyncData(){……}。從名字上就很好理解，這是一個非同步的方法。

建立遠端資料
在這裡製作一些假的遠端資料，我選擇的網站是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

注意：由於asyncData方法是在元件 初始化 前被呼叫的，所以在方法內是沒有辦法通過 this 來引用元件的例項物件。 

asynccData的promise方法
我們在pages下面新建一個檔案，叫做ansyData.vue
然後寫入下面的程式碼：

<template>
    <div>
        <h1>姓名：{{info.name}}</h1>
        <h2>年齡：{{info.age}}</h2>
        <h2>興趣：{{info.interest}}</h2>
        <p><nuxt-link to='/'>Home</nuxt-link></p>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            name: 'muzidigbig',
        }
    },
    //方式一(await)
    // async asyncData(context) {
    //     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}
    //     error(params)//當請求錯誤時直接跳轉到錯誤頁面(放在返回值之後)
    // },
    //方式二
    asyncData ({ params }) {//請求
	return  axios({
	    method: 'get',
	    url: 'https://api.myjson.com/bins/1dkbio'
	})
	.then(function (response) {
            console.log(response.data)
            return { info: response.data};
            error(params)
        })
    },
}
</script>
 

 請求方式一：

	asyncData ({ params }) {//請求
	    return  axios({
		method: 'get',
		url: '後臺api介面'
	    })
	    .then(function (response) {
		  return { posts: response.data.slice(0, 5) }
	    })
	},

 請求方式二：

        async asyncData ({ params }) {
			
	    let { data } = await axios({
			method: 'get',
			url: '後臺api介面'
		})
	    return { posts: data.slice(0, 5) }
	},