原文：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