vue axios并发请求【解决echarts报错Cannot read property ‘getAttribute‘ of null】

大头女侠

于 2022-11-17 20:40:55 发布

阅读量662

点赞数 1

CC 4.0 BY-SA版权

分类专栏： echarts vue 文章标签： echarts vue.js 前端

本文链接：https://blog.csdn.net/weixin_52084329/article/details/127849562

在开发中遇到ECharts渲染时出现'Cannot read property 'getAttribute' of null'错误，原因是HTML元素未加载或代码执行顺序不当。解决办法是使用axios并发请求，确保所有请求完成后再进行ECharts渲染。示例中展示了如何结合axios.all()和axios.spread()实现并发请求，并确保请求结果顺序与请求顺序一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在写中国地图和世界地图切换的时候，由于要两次进行网络请求调用api，而echarts渲染又不能多次渲染，所以就报了这么一个错误：

echarts.js Uncaught TypeError: Cannot read property ‘getAttribute’ of null
在这里插入图片描述

错误原因分析：

html 元素还没加载或者代码还没有执行完就先执行了 echarts 的渲染，也就是代码执行前后顺序的问题。
初始化 echarts 的DOM 元素不存在。

解决方法：
让两个请求都调用完，在进行渲染——执行多个并发请求
官方示例：

function getUserAccount() {
   
   
  return axios.get('/user/12345');
}

function getUserPermissions() {
   
   
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()]