在项目中需要在初始化页面前先得到数据,也就是我们常说的异步请求数据。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
姓名:{ {info.name}}
年龄:{ {info.age}}
兴趣:{ {info.interest}}
{ {name}}
import axios from 'axios'
export default {
data() {
return {