Angular 4中@HostListener触发的POST请求未执行，求解决

嘿，我碰到过类似的坑！你说window:beforeunload触发时控制台能打出market unlocked，但unlockAlias()里的POST操作就是没生效，对吧？这其实是浏览器对页面卸载时异步操作的限制导致的，咱们来一步步搞定它：

问题到底出在哪？ #

window:beforeunload这个事件的处理逻辑是同步执行的，而你用Angular的Http发起的POST请求是异步任务。当浏览器察觉到页面要卸载时，会先跑完同步的代码（比如你的console.log），然后直接终止所有还没完成的异步请求——这就导致你的POST还没来得及发出去，页面就已经关了。

靠谱的解决方案 #

1. 用navigator.sendBeacon()（首推！） #

这是浏览器专门为页面卸载场景设计的API，它会异步发送请求，但能保证浏览器把请求调度完成，不会因为页面卸载就中断：

unlockAlias() {
  // 先把请求参数转成Blob，确保Content-Type符合接口要求
  const payload = JSON.stringify({ /* 你的请求参数 */ });
  const blob = new Blob([payload], { type: 'application/json' });
  
  // 发送请求
  navigator.sendBeacon('/你的API地址', blob);
}

这个API兼容性很好，除了极老的浏览器都支持，而且不会阻塞页面卸载的流程。

2. 同步XMLHttpRequest（应急用，不推荐） #

如果你暂时没法用sendBeacon，可以用同步的XMLHttpRequest，它会阻塞页面直到请求完成：

unlockAlias() {
  const xhr = new XMLHttpRequest();
  // 第三个参数设为false，开启同步模式
  xhr.open('POST', '/你的API地址', false);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(JSON.stringify({ /* 你的请求参数 */ }));
}

不过要注意，同步请求会让页面在卸载时卡顿，用户体验不好，所以优先选sendBeacon。

3. 调整beforeunload的返回值 #

你现在在事件里返回了true，这会触发浏览器的"确定要离开吗？"弹窗。虽然这个弹窗不会直接导致请求失败，但可能会影响请求的时机。如果不需要这个确认弹窗，可以去掉return true，或者返回undefined：

@HostListener('window:beforeunload', ['$event'])
onWindowClose($event) {
  console.log('market unlocked');
  this.unlockAlias();
  // 不需要弹窗就删掉return true
}

额外要检查的点 #

• 先在页面正常加载时手动调用一次unlockAlias()，确认API地址、请求头、参数都是对的，能正常返回
• 如果用了Angular的HTTP拦截器，检查下有没有拦截或者修改了这个POST请求

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