javascript - 在加载组件之前加载外部脚本 - Vue.js

Question

在我的 Vue 项目中，我想从服务器加载一个脚本(例如 https://myurl.com/API.js )。
该脚本包含一个变量，我想在我的 Vue 组件( View )中使用它。
问题是当我使用 loadScript 模块加载该脚本时:

import Vue from 'vue'
import LoadScript from 'vue-plugin-load-script';

Vue.use(LoadScript);
Vue.loadScript('https://quvia.cz:4443/portalAPI.js')

然后在 Vue 组件之后加载，所以当尝试 console.log(externalScriptVariable) ，它是未定义的。如果我将 setTimeout 持续 1 秒，它会很好地输出变量。

我可以在 Vue.js 中做什么来“等待”脚本加载，以便它会在所有其他 Vue 组件之前加载？

Answer 1

您可以使用 async/await

import Vue from 'vue'
import LoadScript from 'vue-plugin-load-script';

Vue.use(LoadScript);

(async function() {
  await Vue.loadScript('https://quvia.cz:4443/portalAPI.js');
  // other things after script loaded
})(); 

或 promise 的 then

import Vue from 'vue'
import LoadScript from 'vue-plugin-load-script';

Vue.use(LoadScript);

Vue.loadScript('https://quvia.cz:4443/portalAPI.js').then(() => {
  // other things after script loaded
})
.catch(() => {
  // error
});