前言
今天初次配置并使用 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
是全局的,放心使。
附上图: