Vue 解决报错 VM6290:1 Uncaught SyntaxError: Unexpected identifier ‘Promise‘

Vue 报错 VM6290:1 Uncaught SyntaxError: Unexpected identifier 'Promise'

排查

控制台报了一个错误 , Uncaught SyntaxError: Unexpected identifier 'Promise',网上查到的方法是 缺少符号,语法写法错误,但这些都没有解决我的问题,于是开始了 一行一行代码注释,排查,找原因

一直以为 是使用了Promise出现的错误,将Promise相关代码注释掉,控制台还是会报这个错误

最终发现 是定时器 setTimeout()里 调用了该方法 导致控制台报的错

修改前代码


javascript 复制代码
  mounted() {
    this.init();
    this.getBoxStatus();
    let timer = null;
    if (timer) {
      clearInterval(timer);
    } else {
      timer = setInterval(() => {
        setTimeout(this.getBoxStatus(), 0);
      }, 1000);
    }
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer);
    });
  },
  async getBoxStatus() {
      let data = {
        cid: this.$route.params.cid,
      };
      const res = await getDuoBoxStatusDto(data);
      if (res && res.length > 0) {
        if (res[0] && res[0].cid) {
          const [r1 = {}, r2 = {}] = await Promise.all([
            videodownloading({ cid: `${res[0].cid}_1` }),//调接口
            videodownloading({ cid: `${res[0].cid}_2` }),//调接口
          ]);
          this.SMD_UrlA01 = r1.data
            ? "data:image/png;base64," + res.data
            : this.defultSmdImg;

          this.SMD_UrlA02 = r2.data
            ? "data:image/png;base64," + res.data
            : this.defultSmdImg;
        }
  },

解决办法

只需要将 setTimeOut() 中调用 方法改一下

修改后

javascript 复制代码
  mounted() {
    this.init();
    this.getBoxStatus();
    let timer = null;
    if (timer) {
      clearInterval(timer);
    } else {
      timer = setInterval(() => {
        setTimeout(async () => {
          this.getBoxStatus();
        }, 0);
      }, 1000);
    }
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer);
    });
  },

setTimeout(this.getBoxStatus(), 0); 适用于一般函数

javascript 复制代码
mounted() {
    this.init();
    this.getBoxStatus();
    let timer = null;
    if (timer) {
      clearInterval(timer);
    } else {
      timer = setInterval(() => {
        setTimeout(this.getBoxStatus(), 0);
      }, 1000);
    }
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer);
    });
  },
methods(){
   getBoxStatus(){
     let data = {
        cid: this.$route.params.cid,
      };
    getDuoBoxStatusDto(data).then(res=>{
           //业务逻辑
     });
}
相关推荐
DsirNg6 小时前
Vue 3 Keep-Alive 深度实践:从原理到最佳实践
前端
拾忆,想起6 小时前
Dubbo序列化异常终结指南:从精准诊断到根治与防御
开发语言·前端·微服务·架构·php·dubbo·safari
yzx9910136 小时前
基于Flask+Vue.js的智能社区垃圾分类管理系统 - 三创赛参赛项目全栈开发指南
vue.js·分类·flask
+VX:Fegn08956 小时前
人力资源管理|基于springboot + vue人力资源管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·课程设计
不如摸鱼去6 小时前
uni-app 也能远程调试?使用 PageSpy 打开调试的新大门!
前端·小程序·uni-app
姓蔡小朋友6 小时前
Redis内存回收
前端·数据库·redis
BD_Marathon6 小时前
【JavaWeb】JS_JSON在服务端的使用
javascript
一 乐6 小时前
海鲜商城购物|基于SprinBoot+vue的海鲜商城系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot
m0_726965986 小时前
ReAct 小发展
前端·react.js·前端框架
秋邱6 小时前
AR 技术团队搭建与规模化接单:从个人到团队的营收跃迁
前端·人工智能·后端·python·html·restful