javascript - 使用 Promise() ECMAScript 6 异步加载文件后访问类

标签 javascript ecmascript-6

我是 ECMAScript 新手,正在尝试异步加载文件并访问该类,但无法这样做。

我的main.js有基本类

console.log("=============in main script=================")

class test{

    constructor(auth_key,auth_secret){
        this.auth_key = auth_key;
        this.auth_secret = auth_secret;
        console.log("============In class test============");
    }

    init(){
        console.log("============In init function============"+this.auth_key);
    }
}

尝试访问index.html中的类

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript">
function sttAsyncLoad(){
    console.log("===========loading script asynchronously============");
    return new Promise(function (resolve, reject) {
        var s;
        s = document.createElement('script');
        s.src = "src/main.js";
        s.onload = resolve;
        s.onerror = reject;
        document.head.appendChild(s);
    });
}
sttAsyncLoad();

let sObj = new test("test","test11");
</script>
</body>
</html>

输出出现错误Uncaught ReferenceError:测试未定义

谁能帮帮我。

最佳答案

您的脚本不会等到 promise 得到解决。它将运行

let sObj = new test("test","test11");

立即,无论脚本是否已加载。

相反,使用promise的then()来等待它解析:

function sttAsyncLoad(){
    console.log("===========loading script asynchronously============");
    return new Promise(function (resolve, reject) {
        var s;
        s = document.createElement('script');
        s.src = "src/main.js";
        s.onload = resolve;
        s.onerror = reject;
        document.head.appendChild(s);
    });
}
sttAsyncLoad().then(function() {
    let sObj = new test("test","test11");
});

关于javascript - 使用 Promise() ECMAScript 6 异步加载文件后访问类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40634492/

相关文章:

javascript - 以编程方式切换 Google Calendar API 的忙/闲事件状态

javascript - 如何在 JavaScript 中以编程方式使某些文本变为粗体?

javascript - Angular Material 在 Chrome 调试(设备)模式下不响应

javascript - 向 es6 子类添加方法

javascript - 正则表达式将 <h[n]> 替换为 <h2> 输出不是预期的

javascript - 避免在 es6 中导出单例

javascript - 词缀在 Bootstrap 4(alpha)中不起作用

javascript - Blockchain API Help - 如何检查支付是否完成?

Javascript 获取(此)行中特定表格单元格中的文本

javascript - prettier-eslint、eslint-plugin-prettier 和 eslint-config-prettier 之间有什么区别?