asyncdata获取参数_Nuxt之asyncData方法获取数据

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

一. 创建远程数据

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

{

"name": "laowang",

"age": 18,

"interest": "I love coding"

}

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

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

二. 安装Axios

npm i axios --save

三. ansycData的promise方法

在pages下新建文件asyncData.vue

import axios from &＃39;axios&＃39;

export default {

data() {

return {

name: &＃39;Hello World&＃39;

}

},

asyncData() {

return axios.get(&＃39;https://api.myjson.com/bins/mr6ma&＃39;)

.then((res) &＃61;> {

return {info: res.data}

})

}

}

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

四. ansycData的await方法

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

import axios from &＃39;axios&＃39;

export default {

data() {

return {

name: &＃39;Hello World&＃39;

}

},

async asyncData() {

let { data } &＃61; await axios.get(&＃39;https://api.myjson.com/bins/mr6ma&＃39;)

return { info: data }

}

}

本文引用于技术胖nuxt教程&＃xff0c;感谢胖哥