Nuxt项目中asyncData()方法中axios请求的使用
它会将asyncData返回的数据融合组件data方法返回数据一并给组件。没有this,因为它是在组件初始化之前被调用的。调用时机:服务端渲染期间和客户端路由更新之前。asyncData()只能在页面组件上使用。asyncData()方法。
·
第asyncData()方法
基本用法:
它会将asyncData返回的数据融合组件data方法返回数据一并给组件
调用时机:服务端渲染期间和客户端路由更新之前
注意事项:
asyncData()只能在页面组件上使用
没有this,因为它是在组件初始化之前被调用的
代码案例一:
<script>
import axios from "axios";
export default {
data() {
return {
hotCities: [],
provinceList: [],
};
},
// 当你想要动态页面内容有利于SEO或者是提升首屏渲染速度的时候,就在asyncData中请求数据
async asyncData() {
const res = await axios({
method: "POST",
url: "http://192.168.0.100:8000/city/cityArea/changeCity",
});
console.log(res.data);
return {
hotCities: res.data.hotCities,
provinceList: res.data.provinceList
};
},
};
</script>
代码案例二:
<script>
import axios from "axios";
export default {
data() {
return {
hotCities: [],
};
},
asyncData() {
return axios({
method: "POST",
url: "http://192.168.0.100:8000/city/cityArea/changeCity",
}).then((res) => {
console.log(res.data);
return {
hotCities: res.data.hotCities,
};
});
}
};
</script>
以上2种写法均可。
更多推荐
已为社区贡献7条内容
所有评论(0)