XRequest 是否可以支持打断

[ZYLBless]

需求动机

使用 XRequest 发起请求后，希望能主动终止请求。目前是否能通过自定义 fetch 的方式实现？

const controllerRef = useRef<AbortController | null>(null);
controllerRef.current = new AbortController();
const { signal } = controllerRef.current;

const exampleRequest = () => {
  const mockFetch = fetch(BASE_URL + PATH, {signal});
  return XRequest({
      baseURL: BASE_URL + PATH,
      model: MODEL,
      fetch: mockFetch,
  })
};

const onRequest = await exampleRequest.create(
     ...
};

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

提议的 API 是什么样的？

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

[afc163]

在使用 Ant Design X 的 XRequest 发起请求时，确实可以通过自定义 fetch 的方式来主动终止请求。你可以使用 AbortController 来实现这一功能。以下是如何实现的步骤：

1. 创建 AbortController: 使用 useRef 来保存 AbortController 的实例。
2. 获取信号: 从 AbortController 中获取 signal，这个信号将用于控制请求的终止。
3. 自定义 fetch: 在调用 XRequest 时，将自定义的 fetch 函数与 signal 一起传入。

以下是一个示例代码：

const controllerRef = useRef<AbortController | null>(null);
controllerRef.current = new AbortController();
const { signal } = controllerRef.current;

const exampleRequest = () => {
  const mockFetch = fetch(BASE_URL + PATH, { signal });
  return XRequest({
      baseURL: BASE_URL + PATH,
      model: MODEL,
      fetch: mockFetch,
  });
};

const onRequest = await exampleRequest.create(
     ...
};

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

在这个示例中，当用户点击取消按钮时，controllerRef.current?.abort() 将会被调用，从而终止当前的请求。

提议的 API

如果你希望在 XRequest 的调用中直接传入 signal，可以考虑如下的 API 设计：

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

这种方式可以使得请求的终止更加直观和简洁。

通过这种方式，你可以有效地控制请求的生命周期，避免不必要的网络请求和资源浪费。

---

Learn more:

1. 请求 XRequest - Ant Design X
2. XRequest等工具希望支持配置请求头 · Issue #369 · ant-design/x · GitHub
3. 在request.js 中利用fetch请求后台，500错误后如获取后台自己定义的json数据？ · Issue #3236 · ant-design/ant-design-pro · GitHub

[Child-qjj]

感觉可以提个PR

[ZYLBless]

自定义signal 配合 useXAgent 使用，终止后无法重新发起请求。

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

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

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

    const res = await fetchRequest();
 
  }
})

const [onRequest] = useXChat({ agent });

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