Vuex结合Axios场景下如何取消所有未完成的不必要请求

问题根因排查&修复方案 #

• 首先排查cancelTokens数组的存储逻辑：在SET_CANCEL_SOURCE mutation中添加日志，确认每个请求发起时都正确将对应source存入数组，不存在漏存、重复覆盖的情况。
• 修正遍历逻辑：你当前在RESET_CANCEL_TOKENS中用map遍历执行取消操作，map本身是用来生成新数组的方法，改成forEach更合理，虽然这个问题不会直接导致取消失败，但可以避免潜在的遍历异常：

RESET_CANCEL_TOKENS: (state) => {
    state.cancelTokens.forEach(item => item.cancel())
    state.cancelTokens = []
}

• 检查是否存在source复用的情况：确保每个独立请求都新建了CancelToken.source()，没有多个请求共用同一个source的情况，共用会导致取消时只会生效最后一个绑定的请求。
• 确认请求状态：cancel方法只能取消处于pending状态的请求，如果请求已经响应完成，调用取消不会有任何效果，可在beforeUnmount触发时打印cancelTokens的长度和对应请求的状态，确认未取消的请求是否已经完成。

优化方案 #

目前CancelToken已经被axios官方弃用，推荐改用标准的AbortController实现，逻辑更稳定，示例如下：

请求发送逻辑 #

const controller = new AbortController();
const config = {
    headers: {
        authorization: `${prefix}${localStorage.getItem('authorization')}`
    },
    signal: controller.signal
};
store.commit('SET_ABORT_CONTROLLER', controller);

const response = await axios.get(url, config);

Store 调整 #

// mutation
SET_ABORT_CONTROLLER: (state, controller) => {
    state.abortControllers.push(controller);
},
RESET_ABORT_CONTROLLERS: (state) => {
    state.abortControllers.forEach(controller => controller.abort());
    state.abortControllers = [];
}
// action 逻辑保持不变，调用RESET_ABORT_CONTROLLERS即可

额外优化建议 #

如果是多页面/多组件共存的场景，不建议全局统一存储所有取消实例，会导致切换组件时误删其他组件的正常请求，可以按组件实例维度存储对应请求的取消实例，组件卸载时只取消当前组件发起的请求即可。

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