Nuxt.js asyncData方法获取数据（await axios和 axios区别）

在项目中需要在初始化页面前先得到数据，也就是我们常说的异步请求数据。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
然后写入下面的代码：

 请求方式一：

	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) }
	},