Ant Design X

XRequest
Request

Ant Design X

XRequest
Request

When To Use

Make requests to backend service APIs to get response data. For OpenAI Compatible LLM services, it's recommended to use XModelAPI.

Code Demo

API

XRequestFunction

ts

type XRequestFunction<Input = Record<PropertyKey, any>, Output = Record<string, string>> = (
  baseURL: string,
  options: XRequestOptions<Input, Output>,
) => XRequestClass<Input, Output>;

XRequestFunction

Property	Description	Type	Default	Version
baseURL	API endpoint URL	string	-	-
options	Request options	XRequestOptions<Input, Output>	-	-

XRequestOptions

Property	Description	Type	Default	Version
callbacks	Request callback handlers	XRequestCallbacks<Output>	-	-
params	Request parameters	Input	-	-
headers	Additional request headers	Record<string, string>	-	-
timeout	Request timeout in milliseconds	number	-	-
streamTimeout	Stream mode data timeout in milliseconds	number	-	-
fetch	Custom fetch object	`typeof fetch`	-	-
middlewares	Middlewares for pre- and post-request processing	XFetchMiddlewares	-	-
transformStream	Stream processor	XStreamOptions<Output>['transformStream'] \| ((baseURL: string, responseHeaders: Headers) => XStreamOptions<Output>['transformStream'])	-	-
manual	Whether to manually control request sending. When `true`, need to manually call `run` method	boolean	false	-

XRequestCallbacks

Property	Description	Type	Default	Version
onSuccess	Success callback	(chunks: Output[]) => void	-	-
onError	Error handling callback	(error: Error) => void	-	-
onUpdate	Message update callback	(chunk: Output) => void	-	-

XRequestClass

Property	Description	Type	Default	Version
abort	Cancel request	() => void	-	-
run	Manually execute request (effective when `manual=true`)	(params?: Input) => void	-	-
isRequesting	Whether currently requesting	boolean	-	-

setXRequestGlobalOptions

ts

type setXRequestGlobalOptions<Input, Output> = (
  options: XRequestGlobalOptions<Input, Output>,
) => void;

XRequestGlobalOptions

ts

type XRequestGlobalOptions<Input, Output> = Pick<
  XRequestOptions<Input, Output>,
  'headers' | 'timeout' | 'streamTimeout' | 'middlewares' | 'fetch' | 'transformStream' | 'manual'
>;

XFetchMiddlewares

ts

interface XFetchMiddlewares {
  onRequest?: (...ags: Parameters<typeof fetch>) => Promise<Parameters<typeof fetch>>;
  onResponse?: (response: Response) => Promise<Response>;
}

When To Use

Make requests to backend service APIs to get response data. For OpenAI Compatible LLM services, it's recommended to use XModelAPI.

Code Demo

API

XRequestFunction

ts

type XRequestFunction<Input = Record<PropertyKey, any>, Output = Record<string, string>> = (
  baseURL: string,
  options: XRequestOptions<Input, Output>,
) => XRequestClass<Input, Output>;

XRequestFunction

Property	Description	Type	Default	Version
baseURL	API endpoint URL	string	-	-
options	Request options	XRequestOptions<Input, Output>	-	-

XRequestOptions

Property	Description	Type	Default	Version
callbacks	Request callback handlers	XRequestCallbacks<Output>	-	-
params	Request parameters	Input	-	-
headers	Additional request headers	Record<string, string>	-	-
timeout	Request timeout in milliseconds	number	-	-
streamTimeout	Stream mode data timeout in milliseconds	number	-	-
fetch	Custom fetch object	`typeof fetch`	-	-
middlewares	Middlewares for pre- and post-request processing	XFetchMiddlewares	-	-
transformStream	Stream processor	XStreamOptions<Output>['transformStream'] \| ((baseURL: string, responseHeaders: Headers) => XStreamOptions<Output>['transformStream'])	-	-
manual	Whether to manually control request sending. When `true`, need to manually call `run` method	boolean	false	-

XRequestCallbacks

Property	Description	Type	Default	Version
onSuccess	Success callback	(chunks: Output[]) => void	-	-
onError	Error handling callback	(error: Error) => void	-	-
onUpdate	Message update callback	(chunk: Output) => void	-	-

XRequestClass

Property	Description	Type	Default	Version
abort	Cancel request	() => void	-	-
run	Manually execute request (effective when `manual=true`)	(params?: Input) => void	-	-
isRequesting	Whether currently requesting	boolean	-	-

setXRequestGlobalOptions

ts

type setXRequestGlobalOptions<Input, Output> = (
  options: XRequestGlobalOptions<Input, Output>,
) => void;

XRequestGlobalOptions

ts

type XRequestGlobalOptions<Input, Output> = Pick<
  XRequestOptions<Input, Output>,
  'headers' | 'timeout' | 'streamTimeout' | 'middlewares' | 'fetch' | 'transformStream' | 'manual'
>;

XFetchMiddlewares

ts

interface XFetchMiddlewares {
  onRequest?: (...ags: Parameters<typeof fetch>) => Promise<Parameters<typeof fetch>>;
  onResponse?: (response: Response) => Promise<Response>;
}

Basic Usage

This example illustrates how to use XRequest to initiate a fetch request . Please copy the code and replace BASE_URL, PATH, and other parameters with actual values in the DEV environment to use it.

Custom Parameters

Customize the params, can send request to intelligent agents, etc.

Custom Transformer

Configure a custom transformStream for XRequest. The following example demonstrates how to handle application/x-ndjson data format.

Model Integration

Access to cloud service platform,can send messages, process data, abort stream.

Timeout Configuration

Configure timeout for XRequest to set the request timeout.

Basic Usage

This example illustrates how to use XRequest to initiate a fetch request . Please copy the code and replace BASE_URL, PATH, and other parameters with actual values in the DEV environment to use it.

Custom Parameters

Customize the params, can send request to intelligent agents, etc.

Custom Transformer

Configure a custom transformStream for XRequest. The following example demonstrates how to handle application/x-ndjson data format.

Model Integration

Access to cloud service platform,can send messages, process data, abort stream.

Timeout Configuration

Configure timeout for XRequest to set the request timeout.

Request Log

Status-

Update Times0

Request Log

Status-

Update Times0

Mock Custom Protocol - Log

Request Log

request undefined

Status-

Update Times0

Request Log

request

Status-

XRequestRequest

XRequestRequest

When To Use

Code Demo

API

XRequestFunction

XRequestFunction

XRequestOptions

XRequestCallbacks

XRequestClass

setXRequestGlobalOptions

XRequestGlobalOptions

XFetchMiddlewares

When To Use

Code Demo

API

XRequestFunction

XRequestFunction

XRequestOptions

XRequestCallbacks

XRequestClass

setXRequestGlobalOptions

XRequestGlobalOptions

XFetchMiddlewares

XRequest
Request

XRequest
Request