浏览器关闭时通过beforeunload事件在React Redux调用API失效如何解决

• Redux Thunk Action 未触发执行
  你定义的myActionMethodSynchronous是一个Thunk Action Creator，调用它只会返回待执行的函数，本身不会执行函数内部的逻辑。平时按钮点击时能正常执行，是因为你通过connect/useDispatch将Action绑定到了React组件，框架自动帮你做了dispatch操作，触发Thunk中间件执行返回的函数。而你在methodToCallBeforeUnload中直接手动调用Action Creator，没有执行dispatch，所以返回的函数永远不会运行，这就是第二个debugger不触发的直接原因。
• 异步请求在页面卸载阶段被中断
  就算你正确dispatch了Action，axios发送的是异步请求，beforeunload事件的回调执行完毕后浏览器会立刻销毁页面上下文，未完成的异步请求会被直接取消，依然无法成功发送到服务端。

1. 修正Thunk Action调用逻辑
   你需要拿到Redux Store的dispatch方法来执行Action。最简单的方式是直接引入你项目中创建的Store实例，手动dispatch：

// 假设你的store在./Redux/store路径下，替换为你项目的实际store路径
import store from "./Redux/store";

methodToCallBeforeUnload= () => {
  store.dispatch(myReduxAction.myActionMethodSynchronous());
}

2. 替换异步请求为页面卸载兼容的发送方式
   推荐用W3C标准的navigator.sendBeaconAPI，浏览器会保证在后台完成该请求，不会阻塞页面卸载，用户体验更好：

const myAPIMethodSynchronous= () => {
  // sendBeacon默认发送POST请求，同域下会自动携带Cookie，满足权限校验需求
  const data = new FormData();
  // 有需要传递的参数可以append到FormData中
  navigator.sendBeacon('/MyAPI/myapimethodname/', data);
};

如果后端必须接收DELETE方法请求，可以临时使用同步XMLHttpRequest（仅适合该特殊场景，不要在普通业务逻辑中使用，会阻塞页面卸载）：

const myAPIMethodSynchronous= () => {
  const xhr = new XMLHttpRequest();
  // 第三个参数设为false表示同步请求
  xhr.open('DELETE', '/MyAPI/myapimethodname/', false);
  xhr.send();
};

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