AJAX调用中使用Async函数出现await语法错误及500错误咨询

语法报错原因 #

你触发Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules报错的核心原因有两个：

• await关键字只能在被async修饰的函数内部使用，你虽然给外层的getFornecedores函数加了async，但实际写await的位置是$.ajax的success回调函数中，这个回调函数本身没有被async修饰，不符合语法要求。
• 你加await的所有操作（jQuery选择器查找节点、each遍历节点）都是同步执行的操作，完全不需要用await修饰，属于不必要的错误用法。

正确代码实现 #

jQuery的$.ajax本身返回Promise对象，搭配async/await使用时不需要写success回调，直接等待请求返回后执行后续逻辑即可，能天然保证请求返回后再填充下拉框，不会出现响应不及时填充失败的问题，正确写法如下：

// 填充供应商下拉框
async function getFornecedores(){
    try {
        // 等待AJAX请求返回结果
        const data = await $.ajax({
            type: 'GET',
            url: web_service_url + "/TM_GetEnt?pEntTp=F",
        });
        const xml_node = $('DocumentElement',data);
        const entnm = [];
        xml_node.find('Tabela>ENTNM').each(function(){
            entnm.push($(this).text());
        });
        xml_node.find('Tabela>ENTCD').each(function(index){
            $(".fornecedor-select").append($("<option>").text(entnm[index]).val($(this).text()));
        });
    } catch (e) {
        console.log( "请求错误", e );
        console.log("请求地址：", web_service_url);
        alert("Erro");
    }
}

// 填充单据类型下拉框
async function getTipoDocumento(){
    try {
        const data = await $.ajax({
            type: 'GET',
            url: web_service_url + "/TM_GetDocTpRecepcao",
        });
        const xml_node = $('DocumentElement',data);
        const doctpds = [];
        xml_node.find('Tabela>DOCTPDS').each(function(){
            doctpds.push($(this).text());
        });
        xml_node.find('Tabela>DOCTPCD').each(function(index){
            $(".documento-select").append($("<option>").text(doctpds[index]).val($(this).text()));
        });
    } catch (e) {
        console.log( "请求错误", e );
        alert("Erro");
    }
}

// 调用两个接口填充下拉框，如果需要等所有下拉框填充完成再执行后续逻辑，可以用Promise.all
Promise.all([getFornecedores(), getTipoDocumento()]).then(() => {
    console.log('所有下拉框填充完成');
});

500 Internal Server Error 排查方案 #

500错误属于服务端内部错误，和前端语法无关，可按以下方向排查：

• 打开浏览器控制台「网络」面板，检查请求的URL拼接是否正确，请求参数、请求头是否符合后端接口要求，是否缺少鉴权信息、Content-Type配置是否正确
• 确认后端接口是否支持跨域请求，请求方式是否为允许的GET类型
• 确认接口返回的XML格式是否符合你前端解析的结构，避免节点不匹配导致服务端处理异常

内容的提问来源于stack exchange，提问作者Inês Borges