原文：https://blog.csdn.net/muzidigbig/article/details/84890000
在項目中需要在初始化頁面前先得到數據，也就是我們常說的異步請求數據。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) }
},
————————————————
版權聲明：本文為CSDN博主「muzidigbig」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/muzidigbig/article/details/84890000