logoAnt Design X

DesignDevelopmentComponentsX MarkdownX SDKPlayground
  • Introduction
  • Data Flow
    • useXChatConversation Data
    • useXConversationsConversation Management
    • Chat ProviderData Provider
  • Utilities
    • XRequestRequest
    • XStreamStream

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

PropertyDescriptionTypeDefaultVersion
baseURLAPI endpoint URLstring--
optionsRequest optionsXRequestOptions<Input, Output>--

XRequestOptions

PropertyDescriptionTypeDefaultVersion
callbacksRequest callback handlersXRequestCallbacks<Output>--
paramsRequest parametersInput--
headersAdditional request headersRecord<string, string>--
timeoutRequest timeout in millisecondsnumber--
streamTimeoutStream mode data timeout in millisecondsnumber--
fetchCustom fetch objecttypeof fetch--
middlewaresMiddlewares for pre- and post-request processingXFetchMiddlewares--
transformStreamStream processorXStreamOptions<Output>['transformStream'] | ((baseURL: string, responseHeaders: Headers) => XStreamOptions<Output>['transformStream'])--
manualWhether to manually control request sending. When true, need to manually call run methodbooleanfalse-

XRequestCallbacks

PropertyDescriptionTypeDefaultVersion
onSuccessSuccess callback(chunks: Output[]) => void--
onErrorError handling callback(error: Error) => void--
onUpdateMessage update callback(chunk: Output) => void--

XRequestClass

PropertyDescriptionTypeDefaultVersion
abortCancel request() => void--
runManually execute request (effective when manual=true)(params?: Input) => void--
isRequestingWhether currently requestingboolean--

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.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom Parameters

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom Transformer

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Model Integration

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Timeout Configuration

Configure timeout for XRequest to set the request timeout.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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-