createAsyncThunk条件Promise未resolve时中止后仍执行问题求助

问题描述 #

使用createAsyncThunk时，在condition返回的Promise尚未resolve前调用abort()，但该Promise resolve后，thunk的异步逻辑依然会执行，预期是中止后不执行任何操作。

相关代码 #

Thunk定义 #

export const sampleThunk = createAsyncThunk('sampleThunk', async () => {
  console.log('do something async');
}, {
  condition: () => new Promise((res) => {
    setTimeout(() => res(true), 1000);
  }),
});

组件内调用 #

useEffect(() => {
    const sampleThunkAction = dispatch(sampleThunk());

    sampleThunkAction.abort();
  }, [dispatch]);

原因分析 #

createAsyncThunk的abort()方法在condition的Promise处于pending状态时调用，并不会中断这个Promise的执行。当Promise最终resolve为true，thunk仍会触发后续的异步逻辑——因为condition的Promise独立于thunk的abort机制，abort信号无法传递到该Promise内部。

解决方案 #

让condition响应abort信号，在检测到abort时直接resolve为false，阻止thunk执行后续逻辑：

export const sampleThunk = createAsyncThunk('sampleThunk', async () => {
  console.log('do something async');
}, {
  condition: (_, { signal }) => new Promise((res) => {
    // 监听abort信号，触发时resolve为false
    const handleAbort = () => res(false);
    signal.addEventListener('abort', handleAbort);

    const timer = setTimeout(() => {
      signal.removeEventListener('abort', handleAbort);
      res(true);
    }, 1000);

    // 清理定时器，避免内存泄漏
    return () => clearTimeout(timer);
  }),
});

原理说明 #

• 调用sampleThunkAction.abort()时，signal会触发abort事件，此时condition的Promise立即resolve为false，createAsyncThunk会判定不执行后续异步逻辑。
• 新增的清理函数会在Promise结束或abort时清除定时器，避免内存泄漏。

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