asyncData方法获取数据
在项目中需要在初始化页面前先得到数据，也就是我们常说的异步请求数据。Nuxt.js贴心的为我们扩展了Vue.js的方法，增加了anyncData。从名字上就很好理解，这是一个一部的方法。
创建远程数据
在这里制作一些假的远程数据，我选择的网站是myjson.com，它是一个json的简单仓库，学习使用是非常适合的。
我们打开网站，在对话空中输入JSON代码，这个代码可以自己随意输入哦。
输入后，网站会给你一个地址，这就是你这个JSON仓库的地址了。
https://api.myjson.com/bins/8gdmr
安装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‘, ????} ?}, ?asyncData(){ ?????return axios.get(‘https://api.myjson.com/bins/8gdmr‘) ?????.then((res)=>{ ?????????console.log(res) ?????????return {info:res.data} ?????}) ???????}}</script>这时候我们可以看到，浏览器中已经能输出结果了。
ansycData的await方法
当然上面的方法稍显过时，现在都在用ansyc…await来解决异步,改写上面的代码。
<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(){ ?????let {data}=await axios.get(‘https://api.myjson.com/bins/8gdmr‘) ?????return {info: data} ???????}}</script>nuxt.js1-8
原文地址：https://www.cnblogs.com/xiaofandegeng/p/9073991.html