一、项目技术介绍
项目使用了vue以及nuxt2.js
二、遇到的问题
在nuxt的钩子函数fetch()中发送axios请求,数据无法在进入页面时被渲染到页面上。
附部分源码如下(接口地址删除了)
fetch部分:
async fetch() {
const res1 = await this.$axios.get("接口1");
if (res1.data.code == 200) {
this.skill = this.skill.concat(res1.data.data);
}
const res4 = await this.$axios.get("接口2")
if(res4.data.code == 200) {
this.total = res4.data.data.records.length;
}
this.getData()
},
getData()方法部分:
getData(){
// 发送请求
this.$axios
.get("接口")
.then((res) => {
if (res.data.code == 200) {
this.caseList.push(...res.data.data.records);
}
});
},
三、解决历程
1.检查同步、异步
fetch()是一个异步函数,是否是getData()方法还没进行完毕?
经过排查测试,多次检查,发现问题并非出在同步、异步的问题上。
2.再次检查代码逻辑
3.重新查看官方文档,尝试增加fetchOnServer: false
增加此配置项,使其在服务器端不执行fetch
方法,只有在客户端渲染的时候才会执行。
问题解决,由于接触不深,具体原理还未理解。
写下此篇文章,记录踩坑历史,方便日后自查。