异步加载js文件

异步加载js文件-script标签引入的文件

我这里用高德地图的script标签举例，
一般情况下我们想用高德地图，就必须在html文件引入script

<script src="https://webapi.amap.com/maps?v=1.3&key=f1ce28b9aa16dfe0fbba78a55f168f7a&plugin=AMap.MarkerClusterer,AMap.AdvancedInfoWindow"></script> -->
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />

但是有些页面没有用到地图也耗时加载了这些外部文件，所以在这有一种方法可以让我们在使用地图的页面时再去加载js文件

 /* 用于异步加载js
      将加载过程封装成为一个Promise，如果正常成功，script 的 onload会作为resolve返回，
      失败的话，script的 onerror会作为reject返回
      如果重复加载的会，会调用resolve，返回-1
      @param {string} [url] (script的在线地址)
      @param {string} [scriptId] (script的id，用来防止重复加载)
      */
    loadScript(url, scriptId) {
      return new Promise((resolve, reject) => {
        if (!document.getElementById(scriptId)) {
          const script = document.createElement('script')
          script.type = 'text/javascript'
          // 处理加载的js地址不正确，导致的报错
          script.onload = resolve
          script.id = scriptId
          script.onerror = reject
          script.src = url
          if (document.head.append) {
            document.head.append(script)
          } else {
            document.getElementsByTagName('head')[0].appendChild(script)
          }
        } else {
          resolve(-1)
        }
      })
    },

下面是调用方法，我在用到地图的这个页面mounted的时候加载script

 let url = 'https://webapi.amap.com/maps?v=1.3&key=f1ce28b9aa16dfe0fbba78a55f168f7a&plugin=AMap.MarkerClusterer,AMap.AdvancedInfoWindow'
 this.loadScript(url, this.projectId)
 //第一个参数是想要加载的script标签的src路径
 //第二个参数是一个标识，防止加载多个相同的script标签