Ant Design X 中的 XRequest 请求中断机制详解

请求中断的必要性

在现代前端开发中，网络请求的管理尤为重要。当用户发起一个请求后，可能会因为各种原因需要取消这个请求，比如页面切换、用户主动取消操作或者请求超时等。Ant Design X 的 XRequest 组件提供了灵活的请求管理能力，其中请求中断功能是开发者经常需要的特性。

实现请求中断的技术方案

AbortController 基础用法

JavaScript 原生提供了 AbortController 接口来实现请求的中断功能。其基本使用方式如下：

const controller = new AbortController();
const signal = controller.signal;

// 发起请求时传入signal
fetch(url, { signal })
  .then(response => response.json())
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求已被取消');
    }
  });

// 需要取消请求时调用
controller.abort();

在 XRequest 中集成中断功能

Ant Design X 的 XRequest 组件可以通过两种方式实现请求中断：

方式一：自定义 fetch 函数

const controllerRef = useRef<AbortController | null>(null);

const exampleRequest = () => {
  controllerRef.current = new AbortController();
  const { signal } = controllerRef.current;
  
  const customFetch = fetch(BASE_URL + PATH, { signal });
  
  return XRequest({
    baseURL: BASE_URL + PATH,
    model: MODEL,
    fetch: customFetch,
  });
};

方式二：直接传递 signal 参数（1.2.0版本支持）

const controllerRef = useRef<AbortController | null>(null);

controllerRef.current = new AbortController();
const { signal } = controllerRef.current;

XRequest({
  baseURL: BASE_URL + PATH,
  model: MODEL,
  signal: signal
});

实际应用场景

结合 useXAgent 使用

当 XRequest 与 useXAgent 一起使用时，需要注意中断后的重新请求问题：

const [agent] = useXAgent<AgentUserMessage | AgentAIMessage>({
  request: (_, { onUpdate }) => {
    controllerRef.current = new AbortController();
    const { signal } = controllerRef.current;

    const fetchRequest = () => {
      return XRequest({
        baseURL: BASE_URL + PATH,
        model: MODEL,
        signal: signal
      }).create({
        stream: true
      }, {
        onUpdate: (message) => {
          onUpdate(message);
        }
      });
    };

    return fetchRequest();
  }
});

用户交互中的中断处理

在用户界面中，可以这样实现请求的中断控制：

<Sender
  onSubmit={(nextContent) => {
    onRequest(nextContent);
  }}
  onCancel={() => controllerRef.current?.abort();}
/>

注意事项

1. 中断后的内容保留：使用中断功能时，已经输出的内容不会被自动清除，开发者需要根据业务需求自行处理这部分逻辑。

2. 重新请求：中断请求后，如果需要重新发起请求，需要重新创建 AbortController 实例。

3. 错误处理：中断请求会触发 AbortError，需要在 catch 中正确处理这种特定错误。

4. 兼容性：虽然现代浏览器都支持 AbortController，但在旧版浏览器中可能需要 polyfill。

最佳实践建议

1. 对于简单的请求场景，推荐直接使用 signal 参数的方式，代码更简洁。

2. 在复杂场景或需要自定义 fetch 逻辑时，可以使用自定义 fetch 函数的方式。

3. 将 AbortController 的管理封装成可复用的 hook，可以提高代码的可维护性。

4. 在组件卸载时，建议取消所有未完成的请求，避免内存泄漏。

通过合理使用 XRequest 的中断功能，可以显著提升应用的用户体验和性能表现，特别是在处理耗时请求或流式数据时尤为重要。