在卸载事件上发送请求

Question

每个人。我得到了一组包含事件信息的对象。例如：

"events": [
    ...,
    {
      "type": "unload",
      "listener": "/idempotency-session/end",
      "method": "post"
    }
  ]

我想根据这个对象的信息创建 eventListener。

const handleEvent = async (api, eventPayload) => {
            const {
                type,
                listener,
                method,
                action,
                headers = {},
                withParams = false,
            } = eventPayload;

            ...

            await callEndpoint(api, listener, method, {}, preparedHeaders)
                .then(data => { 
                    action && stateDispatch({ type: action, payload: data }); 
                })
                .catch(error => console.error(error));
        };

        useEffect(() => {  
            events && events.forEach((event) => {
                const handler = () => {
                    handleEvent(api, event);
                };
                
                window.addEventListener(event.type, handler, event.options);

                return () => {
                    window.removeEventListener(event.type, handler);
                };
            });

          // eslint-disable-next-line react-hooks/exhaustive-deps
          }, []);

问题：卸载事件（当用户关闭页面或导航到另一个页面时）未发送请求。另外，我尝试使用 navigator.sendBeacon 功能，但没有帮助。

Answer 1

问题是您如何调度您的活动， 如果它们在您的事件运行的同一窗口范围内，您应该创建事件并调度它，

const event  = new Event("onload",....)
window.dispatchEvent(event);

第二件事是你对需要定义 2 个 foreach 的反应生命周期做的有点不对

     useEffect(() => {  
            events && events.forEach((event) => {
                const handler = () => {
                    handleEvent(api, event);
                };
                
                window.addEventListener(event.type, handler, event.options);

               
            });


           return () => {
                events && events.forEach((event) => {
                    const handler = () => {
                        handleEvent(api, event);
                   };
                
                    window.addEventListener(event.type, handler, event.options);

               
            });
           };
          // eslint-disable-next-line react-hooks/exhaustive-deps
          }, []);

当你删除你的监听器时还有其他问题，你应该传递所有参数并且你错过了选项

    window.removeEventListener(event.type, handler , event.options);