Nuxt之asyncData方法获取数据

在项目中需要在初始化页面前先得到数据，也就是我们常说的异步请求数据。Nuxt.js贴心的为我们扩展了Vue.js的方法，增加了anyncData方法。从名字上就很好理解，这是一个异步的方法。

一. 创建远程数据

在这里制作一些假的远程数据，我选择的网站是myjson.com，它是一个json的简单仓库，学习使用是非常适合的。 我们打开网站，在对话空中输入JSON代码，这个代码可以自己随意输入哦。

{
  "name": "laowang",
  "age": 18,
  "interest": "I love coding"
}
复制代码

输入后，网站会给你一个地址，这就是你这个JSON仓库的地址了。

https://api.myjson.com/bins/mr6ma

二. 安装Axios

npm i axios --save复制代码

三. ansycData的promise方法

在pages下新建文件asyncData.vue

<template>
  <div>
    <h1>姓名：{{info.name}}</h1>
    <h1>年龄：{{info.age}}</h1>
    <h1>兴趣：{{info.interest}}</h1>
    {{name}}
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      name: 'Hello World'
    }
  },
  asyncData() {
    return axios.get('https://api.myjson.com/bins/mr6ma')
                .then((res) => {
                   return {info: res.data}
                })
  }
}
</script>
复制代码

这时候我们可以看到，浏览器中已经能输出结果了。

四. ansycData的await方法

当然上面的方法稍显过时，现在都在用ansyc…await来解决异步,改写上面的代码。

<template>
  <div>
    <h1>姓名：{{info.name}}</h1>
    <h1>年龄：{{info.age}}</h1>
    <h1>兴趣：{{info.interest}}</h1>
    {{name}}
  </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/mr6ma')
    return { info: data }
  }
}
</script>复制代码

本文引用于技术胖nuxt教程，感谢胖哥