为何普通JavaScript中async/await会中断正常流程？

分析与解决 #

这种中断情况核心原因是fetch请求抛出了未被捕获的异常，async函数内部一旦遇到未处理的Promise拒绝，就会直接中止执行流程，不会走到后续代码。

具体排查与修复方案： #

1. 添加异常捕获逻辑
   给fetch请求包裹try/catch，捕获并输出错误信息，才能定位问题：

   async function postAjaxWithFetch(url, data) {
       try {
           var params = typeof data == 'string' ? data : Object.keys(data).map(
               k => `${encodeURIComponent(k)}=${encodeURIComponent(data[k])}`
           ).join('&');
           const request1 = new Request(url, {
               method: "POST",
               body: params,
               headers: {
                   'X-Requested-With': 'XMLHttpRequest',
                   'Content-Type': 'application/x-www-form-urlencoded'
               }
           });
           const response1 = await fetch(request1);
           console.log(response1);
           alert("hello from postAjaxWithFetch");
           return response1;
       } catch (err) {
           console.error("POST请求出错:", err);
           alert("请求失败：" + err.message);
           throw err; // 可选：向上抛出异常，让调用者也能处理
       }
   }
   

   同时在按钮处理函数中也添加捕获，避免上层未处理的Promise拒绝：

   async function btnFinishDay_click(eee) {
       try {
           var txtBarCodeValue = document.getElementById("txtBarCode").value;
           var rrr = await postAjaxWithFetch('/CheckItem', { barcodeValue: txtBarCodeValue });
           console.log(rrr);
           alert("CheckCustomer request was sent");
       } catch (err) {
           console.error("按钮处理流程出错:", err);
       }
   }
   

2. 排查请求本身的问题

   • 检查请求路径/CheckItem是否正确，是否与当前页面同源：若跨域，需服务器配置CORS允许该请求。
   • 确认Content-Type是否匹配服务器要求：当前设置的application/x-www-form-urlencoded，需确保服务器能解析该格式的参数。
   • 查看浏览器控制台的Console标签：未被捕获的错误信息会在这里显示；查看Network标签：若请求被拦截或失败，会有对应的状态记录。

3. 处理HTTP错误状态码
   fetch不会因为HTTP错误状态码（4xx/5xx）触发reject，只会让返回的response.ok变为false。如果需要处理这类情况，可以在获取response后添加判断：

   const response1 = await fetch(request1);
   if (!response1.ok) {
       throw new Error(`HTTP错误：${response1.status}`);
   }
   

内容的提问来源于stack exchange，提问作者Ivan P.