如何回調異步/等待函數

Question

我在 JavaScript 中的異步函數讀取一個文件，然后將結果放入特定的 div。

async function loadContent( id, file ) {
    var response = await fetch( file );
    var text = await response.text();
    document.getElementById( id ).innerHTML = text;
}

我現在這樣使用它：

loadContent("pagesmaxspan", "../export/" + `<?php echo $randomid ?>` + ".variable");

但是當我嘗試獲取變量時它不起作用

var myvar = $("pagesmaxspan").textContent; // <<--- this does not work

延遲它看起來像這樣：

var myvar = "";

setTimeout(function() {
    myvar = $("pagesmaxspan").textContent;
}, 100);

如何在不使用setTimeout情況下執行此操作？

Answer 1

當您調用loadContent那里沒有await ，因此您只需從async函數中獲得一個 Promise，然后代碼繼續執行。

這就是為什么上面@Patrick 的建議有效的原因，將您之后需要執行的代碼放在then 。

Answer 2

要為@kshetline 答案提供示例，這應該有效。

loadContent("pagesmaxspan", "../export/" + `<?php echo $randomid ?>` + ".variable")
.then(() => {
   console.log($("pagesmaxspan").textContent);
})

Answer 3

將回調添加到函數loadContent

async function loadContent( id, file, callBack = false) {
    var response = await fetch( file );
    var text = await response.text();
    document.getElementById( id ).innerHTML = text;

    //check if callback is function
    if (callBack && callBack.constructor && callBack.call && callBack.apply)
    {
        callBack();
    }
}

用它來稱呼它

loadContent("pagesmaxspan", "../export/" + `<?php echo $randomid ?>` + ".variable",
 function(){
    var myvar = $("pagesmaxspan").textContent;
});