Javascript 函数在await 语句之后立即从函数返回

Question

我正在编写客户端 JavaScript 函数来向服务器发送 POST 请求并获取结果。我在工作中使用这些资源：

1. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
2. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
3. 我如何解决React中onSubmit方法中的附加发布请求（我不使用react，只是使用常规javascript。那里的答案提到了异步等待机制，可以帮助您避免旋转回调）。

这是我的代码：

Html 部分 - 触发 Javascript 的按钮：

<button class="btn btn-success greenbtn" id="btnFinishDay" onclick="btnFinishDay_click(event)" name="btnFinishDay" >GO</button></div>

这是按钮处理程序：

async function btnFinishDay_click(eee) {
    var txtBarCodeValue = document.getElementById("txtBarCode").value;
    var rrr = await postAjaxWithFetch('/CheckItem', { barcodeValue: txtBarCodeValue });
    console.log(rrr);
    alert("CheckCustomer request was sent");
}

这是我发送帖子请求的方式：

/*
A modern way to use POST request with form data and ajax. 
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
*/
async function postAjaxWithFetch(url, data) {
    // if data is string then use it as is. If it is Object then generate formdata string from it
    var params = typeof data == 'string' ? data : Object.keys(data).map(
        function (k) { return 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;
}

不幸的是，在到达await 语句后，子例程就会退出。在调试器中我看到：

1. btnFinishDay_click

   已输入

2. await postAjaxWithFetch

   通话已接通

3. postAjaxWithFetch

   功能已进入

4. const response1 = await fetch(request1)

   已达到

5. postAjaxWithFetch

   被步出，没有

   console.log

   也没有

   alert

   被称为
6. 网络监视器未显示任何/CheckItem请求
7. btnFinishDay_click 完成，不显示提醒

总而言之 - 不处理任何警报呼叫。这让我感到困惑......

问题是：为什么常规 javascript 中的 async 和 wait 会破坏正常流程？

Answer 1

问题似乎可能与

fetch

API 的使用方式或响应处理有关。以下是一些需要检查的事项和可能的修复方法：

1. 网络监控： 如果您的网络监视器没有显示

   /CheckItem

   请求，则意味着请求未到达服务器。这可能是由于：

• URL 不正确或无法访问。
• 浏览器因 CORS 问题（跨源资源共享）而阻止请求。
• 由于网络错误或请求标头配置错误，

  fetch

  函数会默默失败。

2. 确保

   fetch

   正确处理错误： 将

   fetch

   调用包装在

   try-catch

   块中以捕获任何错误。

   fetch

   不会在 HTTP 错误上抛出错误（如

   404

   或

   500

   ），但如果网络请求失败，它会抛出错误，因此最好检查一下。

这是带有错误处理的代码的修改版本：

javascript 异步函数 postAjaxWithFetch(url, data) { 尝试 { // 如果数据是字符串，则按原样使用它。如果它是一个对象，则从中生成一个表单编码的字符串。 const params = typeof data === 'string' ?数据：对象.键（数据） .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',
        },
    });

    // Use fetch to make the request and wait for the response
    const response1 = await fetch(request1);

    // If fetch was successful, but the response is not ok (e.g. 404 or 500), throw an error
    if (!response1.ok) {
        throw new Error(`HTTP error! Status: ${response1.status}`);
    }

    // Convert response to JSON or text depending on your response format
    const data = await response1.json();  // Or response1.text() if not using JSON
    console.log(data);
    return data;
} catch (error) {
    console.error("Error in postAjaxWithFetch:", error);
    alert("Error during POST request: " + error.message);
    return null;  // Return null or some default value in case of error
}

}

检查响应类型： 如果服务器响应不是 JSON，并且您尝试将其解析为 JSON，则可能会导致问题。如果您的回复是纯文本，请相应地调整您的代码：

javascript const data = 等待response1.text(); // 如果你的响应不是 JSON

4. CORS 和服务器端注意事项：

• CORS 问题：确保您的服务器允许浏览器发出跨域请求。如果服务器与客户端位于不同的域，您需要在服务器上配置 CORS 以允许

  POST

  请求。

• 服务器日志：检查服务器日志以确保其正确接收请求。如果服务器没有记录任何内容，则可能意味着请求根本没有到达服务器。

仔细检查网址： 确保

/CheckItem

端点正确。这可能是相对 URL 的问题或服务器上的路由不正确。

6. 调试技巧

• 在

  request1

  调用之前记录

  fetch

  对象，以验证请求是否已正确创建。
• 在整个

  console.log

  函数中使用

  async

  语句来跟踪其流程。

如果这些建议都不起作用，请提供有关服务器和网络设置的更多详细信息，以便我们进一步调查！