JavaScript中使用async/await等待函数执行完成及报错解决

咱们先搞清楚报错的核心原因：你在reader.onload的回调函数里使用了await，但这个回调本身并没有被标记为async——JavaScript的规则就是await只能在async函数内部使用，这就是触发语法错误的根源。另外你原来的代码里同时混用了await和.then()，这会导致变量赋值逻辑混乱，咱们一起把这两个问题都修复掉：

修改后的完整代码 #

Upload函数（核心改动点） #

async function Upload() {
    var fileUpload = document.getElementById("fileUpload");
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
    if (regex.test(fileUpload.value.toLowerCase())) {
        if (typeof (FileReader)!== "undefined") {
            var reader = new FileReader();
            // 关键改动1：给回调函数标记async，让内部可以合法使用await
            reader.onload = async function(e) {
                var csv = e.target.result;
                var data = $.csv.toObjects(csv);
                var investorsBalance = "";
                // 关键改动2：简化await调用逻辑，不再混用then和await
                for(var i=0;i<data.length;i++){
                    investorsBalance = await getAccountDetailsInvestor(data[i].investor_id, data[i].asset_code);
                    alert("ret_val :"+investorsBalance);
                    alert("investorsBalance :"+investorsBalance);
                }
            }
            reader.readAsText(fileUpload.files[0]);
        } else {
            alert("This browser does not support HTML5.");
        }
    } else {
        alert("Please upload a valid CSV file.");
    }
}

getAccountDetailsInvestor函数（可选优化） #

async function getAccountDetailsInvestor(investorId, assetCode){
    console.log("getAccountDetails :"+investorId);
    $("#overlay").show();
    // 直接用await获取账户数据，省略冗余中间变量
    const userLoadAccount = await server.loadAccount(investorId);
    // 用find代替forEach，更简洁精准地定位目标资产
    const targetBalance = userLoadAccount.balances.find(obj => {
        return obj.asset_type !== "native" && obj.asset_code === assetCode;
    });
    $("#overlay").hide();
    // 找到资产返回余额，否则返回空字符串
    return targetBalance ? targetBalance.balance : "";
}

关键改动说明 #

1. 给onload回调添加async标记：把reader.onload的回调声明为async function，让函数内部满足使用await的语法要求。
2. 简化异步调用逻辑：去掉多余的.then()链式调用，直接用await获取getAccountDetailsInvestor的返回值，既避免了变量赋值混乱，又保证了逐行同步执行——上一个账户详情获取完成后，才会处理下一行数据，完全符合你的需求。
3. 优化余额查找逻辑：用数组find方法替代forEach遍历，代码更简洁易读，逻辑也更清晰。

这样修改后，你的代码就能正常等待getAccountDetailsInvestor执行完成后再继续后续操作，也不会再触发语法错误了。

内容的提问来源于stack exchange，提问作者Developer Desk