XMLHttpRequest异步发送表单数据仅加alert可正常提交问题咨询

问题原因分析 #

1. 为什么加alert才能正常发送数据 #

核心是两个低级逻辑问题：

• 表单默认提交行为未阻止：你这段XHR代码大概率是绑定在表单的submit事件上的，没有调用e.preventDefault()阻止表单的默认提交行为。触发submit事件后，浏览器会自动按表单的action属性地址跳转，没加alert的情况下，XHR刚调用send，页面就开始跳转，直接中断了还没完成的异步请求，数据没发完就被砍断，后续回调自然也不会执行。而alert是阻塞JS执行的，弹窗弹出时页面跳转被暂停，给了XHR足够的时间完成请求发送、接收响应、触发回调，所以加了alert就能跑通。
• 事件绑定顺序错误：你把xhr.onreadystatechange的回调绑定写在了xhr.send()之后，异步请求如果响应速度极快，在你绑定回调之前请求就已经返回了，那回调函数永远不会被触发，就算没有表单跳转的问题，也会偶现回调不执行的情况。

2. 为什么try/catch没有捕获到错误 #

try/catch只能捕获当前同步执行栈中抛出的错误，XMLHttpRequest是异步网络请求，send方法只是把请求加入浏览器的异步任务队列，后续的网络错误、请求错误都是在事件循环的异步阶段触发的，已经脱离了当初try块的执行上下文，自然捕获不到。XHR的错误需要通过绑定onerror事件来监听，你现在写的try块最多只能捕获JSON.stringify的同步错误，比如sendForm存在循环引用这类问题。

修复方案 #

// 假设代码绑定在表单submit事件上
form.addEventListener('submit', function(e) {
  // 第一步：阻止表单默认提交行为
  e.preventDefault();
  
  let xhr = new XMLHttpRequest();
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-Type", "application/json");
  
  // 第二步：先绑定所有回调再执行send
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      location.href = 'thanks.html';
    }
  };
  // 绑定异步错误监听
  xhr.onerror = function(error) {
    console.log('请求出错', error);
    alert(error);
  }
  
  try {
    let data = JSON.stringify(sendForm);
    xhr.send(data);
  } catch (error) {
    alert('同步逻辑出错：' + error);
  }
})

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