页面导航时如何取消或中止Livewire请求

下面给你几种可行的方案，根据你的Livewire版本选择：

方案1：Livewire 3+ 直接用内置方法 #

Livewire 3自带了Livewire.cancelPendingRequests()方法，专门用来终止所有待处理的请求。你只需要在页面跳转的时机调用它就行：

比如监听浏览器的页面卸载事件，或者Livewire自身的导航事件：

// 监听页面卸载（刷新、跳转外部链接时触发）
window.addEventListener('beforeunload', () => {
    Livewire.cancelPendingRequests();
});

// 如果用了Livewire的wire:navigate做单页导航，监听这个事件更精准
document.addEventListener('livewire:navigating', () => {
    Livewire.cancelPendingRequests();
});

方案2：Livewire 2 手动用Axios CancelToken处理 #

Livewire 2没有内置的取消方法，但它底层还是用Axios发请求，所以可以手动给每个Livewire请求加CancelToken，然后在跳转时批量取消：

1. 先拿到Livewire用的Axios实例，然后加请求拦截器，给每个请求绑定CancelToken：

const livewireAxios = Livewire.axios;
let pendingCancelSources = [];

// 请求拦截：给每个Livewire请求添加CancelToken
livewireAxios.interceptors.request.use(config => {
    const cancelSource = livewireAxios.CancelToken.source();
    config.cancelToken = cancelSource.token;
    pendingCancelSources.push(cancelSource);
    return config;
});

// 响应拦截：请求完成后移除对应的CancelToken
livewireAxios.interceptors.response.use(
    res => {
        pendingCancelSources = pendingCancelSources.filter(source => source.token !== res.config.cancelToken);
        return res;
    },
    err => {
        // 如果是主动取消的请求，不用处理错误
        if (!livewireAxios.isCancel(err)) {
            pendingCancelSources = pendingCancelSources.filter(source => source.token !== err.config.cancelToken);
        }
        return Promise.reject(err);
    }
);

2. 同样在页面跳转时取消所有待处理请求：

window.addEventListener('beforeunload', () => {
    pendingCancelSources.forEach(source => source.cancel('页面跳转，取消未完成请求'));
    pendingCancelSources = [];
});

// 针对wire:navigate的情况
document.addEventListener('livewire:navigating', () => {
    pendingCancelSources.forEach(source => source.cancel('Livewire导航，取消未完成请求'));
    pendingCancelSources = [];
});

额外优化：屏蔽取消请求的错误提示 #

就算取消了请求，有些情况下Livewire还是会弹出错误提示，你可以通过钩子拦截掉这些无关错误：

Livewire.hook('request.failed', (message) => {
    // 判断错误信息是否是我们主动取消的请求
    if (message.includes('取消未完成请求')) {
        return false; // 返回false阻止Livewire显示默认错误提示
    }
});

这样就能彻底避免旧请求的错误影响当前页面了。

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