Nuxt - asyncData / fetch 请求数据控制台报错 Cannot read properties of undefined (reading ‘data‘) 也可能报其他未定义

前言

今天初次配置并使用 asyncData / fetch 请求异步数据时,发现控制台报了一个错误(如题),当时一看懵了,这哪有什么 data 不存在啊,于是将矛头指向了该页面组件的 data 与模板,发现并无异样。


紧接着,我就仔细排查自己的异步请求 $axios.get / $axios.post ,发现也并无异样,并且都进行了非常严格的测试,确定无问题!


这会我已经懵了,没啥地方可排查了,最奇怪的是,有时候还能正常请求到数据,但是一刷新就又会报这个错,但是我知道,肯定是哪里有问题,否则不可能会报错。


所以,我重新创建了一个新的 demo 项目用于测试,从0-1开始配置。配置好后,我使用自己项目的获取异步数据代码(疑似报错的代码)进行 asyncData 请求,发现竟然通了。


最后,我明白了。我直接就想到了请求配置那块。因为我项目配置了拦截器、获取Token、错误处理等,心想这个 asyncData 一定会走请求配置的,果然,打开配置文件(axios.js)时,我发现了获取 Token 那块,有一行代码是获取缓存的:localStorage.getItem('token'),嗯,真相大白了!

由于该问题发生概率比较小,所以请您认真读一读上方描述,

如果是同样遭遇,请继续往下看。

解决方案

核心:请仔细排查 与请求相关的配置文件或代码,其中是否有 windows / documetn 对象。

首先,您必须确保请求路径及跨域等配置正常,并且能正常在 mounted() 钩子中请求。


因为 asyncData 请求在 服务端完成请求!!!,其环境并没有 window / document 等对象,

当遇到这些 “无法识别” 的对象时,就会抛出这个错误(如题)。


所以您的请求配置那块,如果用到了相关对象或语法,请使用环境变量判断一下。

// 只有在客户端才执行里面的代码
if(process.client) {
    
    
	// window/document相关操作
	// 比如读取 localStorage 缓存获取token
	// ...
}

process 是全局的,放心使。

附上图:

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44198965/article/details/125683025