请求停滞在pending状态，组件未更新API响应问题求助

问题现象 #

请求一直卡在pending状态，组件内状态始终保持{status: "pending", isLoading: true, data: undefined}无变化。DevTools和API层面已确认响应返回，但组件无法获取数据，怀疑缓存问题但未定位到具体原因。

相关代码 #

API 定义 #

getNewEvents: builder.query<Event[], number>({
  queryFn: async (size, { getState }, _extraOptions, baseQuery) => {
    const state = getState() as RootState;
    const city = state.filter.city;

    const url = `events/new?size=${size ?? 20}${!city || city === 'All city' ? '' : '&cityName=' + city}`;

    const result = await baseQuery({ url, method: 'GET' });

    if (result?.error) {
      return { error: result.error };
    }

    let content = result.data as Event[];

    if (content.length === 0) {
      const url = `events/new?size=${size ?? 20}`;
      const result = await baseQuery({ url, method: 'GET' });

      if (result.error) {
        return { error: result.error };
      }

      content = result.data as Event[];
    }
    return { data: content };
  },
  providesTags: ['NewEvent'],
}),

组件 Hooks 使用 #

const {
    data: newEvent,
    isLoading: newEventIsLoading,
    isFetching: newEventIsFetching,
  } = useGetNewEventsQuery(10);
  const {
    isLoading,
    isFetching,
    data: events,
  } = useGetAllEventsFilteredQuery({
    page: 0,
    size: 21,
    filter: {},
  });

排查与解决建议 #

• 补全异步请求异常捕获：当前queryFn中第二次请求未做异常捕获，如果该请求出现未处理的Promise拒绝，会导致整个查询一直处于pending状态。给第二次请求添加try/catch，确保无论结果如何都能返回明确的data或error：

  if (content.length === 0) {
    const fallbackUrl = `events/new?size=${size ?? 20}`;
    try {
      const fallbackResult = await baseQuery({ url: fallbackUrl, method: 'GET' });
      if (fallbackResult.error) {
        return { error: fallbackResult.error };
      }
      content = fallbackResult.data as Event[];
    } catch (err) {
      return { error: { status: 'FAILED', error: '兜底请求失败' } };
    }
  }
  

• 检查baseQuery实现：确认baseQuery内部是否存在未处理的异常，比如网络超时、响应解析错误等，这些都会导致queryFn的Promise无法正常resolve。
• 验证状态订阅逻辑：在组件内添加日志打印newEventIsLoading、newEventIsFetching，确认组件是否正确订阅了查询状态；同时检查RootState类型断言是否正确，state.filter.city的取值是否符合预期，错误的类型断言可能导致逻辑分支异常。
• 排查缓存与请求重复问题：查看Redux DevTools中是否有重复请求被触发或取消，确认providesTags是否与其他查询的invalidatesTags冲突，不过当前问题更偏向异步逻辑阻塞，优先排查前几点。

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