Vue引入CDN JS或本地JS文件之后使用报错

最新推荐文章于 2024-10-17 09:45:00 发布

RyzenVega

最新推荐文章于 2024-10-17 09:45:00 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_46607967/article/details/131959221

文章介绍了如何处理JavaScript文件加载时可能未完成的情况，通过在`index.html`中引入`script`标签，然后创建一个JS文件导出一个`init`方法，该方法返回一个Promise来确保脚本已加载并可在`window`对象下使用。当脚本加载成功，Promise解析并执行相应逻辑；如果加载失败，Promise将被拒绝并打印错误信息。

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

加载问题

正常情况在public引入script - js文件加载 - 写入内存 - 使用

但使用之前有可能这个文件还没执行写入内存或者还未加载完毕

此时需要一个promiss解决

1. 引入script

在 public / index.html 文件内引入你的script标签

<script type="text/javascript" src="本地路径/网络路径">

2.加载（重点）

创建一个js文件写入以下代码

script加载后所使用的方法会挂载到window顶级对象下代码中的xxx 指的是你script的函数替换即可

export default {
  init() {
    return new Promise((resolve, reject) => {
      if (window.xxx) {
        resolve(window.xxx)
        reject('error')
      }
    })
  },
}

3.使用（重点）

// 引入
import funInit from '@/utils/funInit'


// 在使用的地方写入
funInit.init()
  .then((xxx) => {
    console.log("你的逻辑代码")
  })
  .catch(() => {
     console.log("script加载失败")
  })