在项目中需要在初始化页面前先得到数据,也就是我们常说的异步请求数据。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>