数据注册时出现异步响应错误，请求技术排查帮助

错误信息 #

Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

问题场景 #

该功能在本地环境测试完全正常，但部署到服务器环境时触发上述错误。因条件限制无法自行测试服务器端，排除后端问题可能性，怀疑是前端异步处理逻辑存在疏漏，寻求排查思路。

相关代码 #

点击事件处理逻辑 #

// 発注登録
let orderRegister = document.getElementById("yes");
let memoData = document.getElementById("myTextarea");
orderRegister.addEventListener("click", function () {
    if (qr_code.value !== "" && orderAmount.value !== "" && confirmationText.innerHTML === "登録しますよろしいですか？") {
        let handOverDate = new Date(handOver.value);
        let parameter = {
            requestType: 4,
            orderDate: orderDate.value,
            product_id: product_id,
            expectedDate: expectedDate.value,
            handOver: handOverDate,
            orderAmount: next_focus.value,
            memoData: memoData.value,
            supplierName: supplierName,
            currentDate: currentDate,
            supplierID: supplierID,
            deadLine: deadLine
        }
        postData(url, parameter, function (error, data) {
            if (error) {
                alert(error);
            } else {
                if (data.status === "error") {
                    document.getElementById("supplier_name").innerHTML = "";
                    myFunction();
                    modalClose();
                    qr_code.value = "";
                    orderDate.value = "";
                    expectedDate.value = "";
                    handOver.value = "";
                    productName.innerHTML = "";
                    modalName.innerHTML = "";
                    inputNumber.innerHTML = "";
                    memoData.value = "";
                    orderLot.innerHTML = "";
                    orderAmount.value = "";
                    main_element[0].classList.remove('show');
                    none_div.style.display = "block";
                    display_info_element.classList.remove("change-style");
                }
            }
        })
    } else if (confirmationText.innerHTML === "登録しますよろしいですか？") {
        alert("発注数をご入力くださいませ。");
        modalClose();
    }

});

// 登録結果を確認する
function myFunction() {
    var x = document.getElementById("snackbar");
    x.className = "show";
    setTimeout(function () { x.className = x.className.replace("show", ""); }, 3000);
}
// モーダルウィンドウを閉じる
function modalClose() {
    modal.classList.add("modal-hidden");
    overlay.classList.add("overlay-hidden");
}

异步请求函数 #

function postData(url, data, callback) {
    let xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                let response = JSON.parse(xhr.responseText);
                callback(null, response);
            } else {
                callback(new Error('ネットワークに接続されていません。接続を確認してもう一度お試しください。'));
            }
        }
    };

    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify(data));
};

排查建议 #

• 阻止默认表单提交行为：如果orderRegister按钮位于<form>标签内，点击时会触发表单默认提交，导致页面跳转，中断异步请求。解决方法：在事件函数开头添加event.preventDefault()，或给按钮设置type="button"属性。
• 添加请求超时处理：服务器环境网络延迟可能导致请求未完成时页面上下文已销毁。给XHR添加超时配置：

  xhr.timeout = 15000; // 设置15秒超时
  xhr.ontimeout = function() {
      callback(new Error('リクエストがタイムアウトしました'));
  };
  

• 修正Date对象序列化：直接将Date实例放入请求参数，JSON序列化后格式可能在服务器端解析异常，导致请求未正常响应。改为传递ISO格式字符串：

  handOver: handOverDate.toISOString()
  

• 确保回调中DOM元素存在：若请求完成前模态框已关闭，部分DOM元素可能被移除，触发未捕获异常。在回调操作DOM前先检查元素是否存在，比如：

  const supplierNameEl = document.getElementById("supplier_name");
  if (supplierNameEl) supplierNameEl.innerHTML = "";
  

内容的提问来源于stack exchange，提问作者phoon weile