发送ajax请求后页面在成功响应返回前刷新，如何获取该请求的响应？

默认情况下页面刷新会销毁当前页面的所有内存上下文，未完成的AJAX请求会直接中断，响应返回后也没有对应的回调函数接收处理，必须借助跨页面生命周期的存储机制配合对应逻辑才能实现需求，以下是可落地的实现方案：

• 方案1：借助beforeunload事件暂存请求信息，刷新后重发
  在页面触发刷新的beforeunload事件回调中，将未完成的AJAX请求的请求方式、URL、参数等信息存储到localStorage/sessionStorage中，页面刷新完成后先读取存储中未完成的请求记录，重新发起相同的请求，拿到响应后再清除对应存储记录即可。
  注意：该方案仅适用于幂等性请求（例如GET查询类请求），非幂等的POST提交类请求不要使用，避免出现重复提交的问题。
• 方案2：服务端配合生成请求唯一标识，刷新后主动拉取结果
  前端发起AJAX请求时，先生成全局唯一的requestId和请求参数一同传给服务端，服务端接收到请求后先返回requestId的确认回执（该回执在请求实际处理前返回，耗时极短基本不会被刷新中断），前端将requestId存入本地存储。服务端异步处理请求，处理完成后将响应结果和requestId绑定存储在缓存或者数据库中。页面刷新完成后，前端读取本地存储的requestId，调用专用的查询接口拉取对应请求的处理结果，拿到结果后通知服务端清除对应缓存即可。
  该方案适用于所有类型的请求，包括非幂等的提交类请求，不会出现重复执行的问题，是生产环境最常用的实现方案。
• 方案3：使用Service Worker代理请求
  Service Worker是运行在浏览器独立线程的脚本，生命周期和普通页面分离，页面刷新不会直接销毁已经激活的Service Worker。可以在Service Worker中监听所有的AJAX请求，拿到响应结果后如果检测到原页面已经销毁，就将响应结果暂存到IndexedDB中，等新页面加载完成后，主动向Service Worker查询未投递的响应结果即可。
  注意：该方案需要浏览器支持Service Worker，适配逻辑相对复杂，适合对离线能力、请求可靠性要求较高的场景。

所有方案都需要提前在业务逻辑中做适配，没有无侵入的通用方案可以直接实现需求。如果是用户主动触发的刷新操作，也可以在beforeunload事件中添加未完成请求的提示，引导用户等待请求完成后再刷新，实现成本最低。

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