XRequest 请求

何时使用

向符合 OpenAI 标准的 LLM 发起请求。

代码演示

基础

该示例说明如何使用 XRequest 对符合 OpenAI 标准的 LLM 发起 fetch 请求，请拷贝代码且在 DEV 环境用实际的值替换 BASE_URL, PATH, MODEL, API_KEY 来使用

Request Log

Status-

Update Times0

<script setup lang="tsx">
import { LoadingOutlined, TagsOutlined } from '@ant-design/icons-vue';
import { Button, Descriptions, Flex } from 'ant-design-vue';
import { ThoughtChain, type ThoughtChainItem, XRequest } from 'ant-design-x-vue';
import { ref } from 'vue';

defineOptions({ name: 'AXXRequestBasic' });

/**
 * 🔔 Please replace the BASE_URL, PATH, MODEL, API_KEY with your own values.
 */
const BASE_URL = 'https://api.example.com';
const PATH = '/chat';
const MODEL = 'gpt-3.5-turbo';
// const API_KEY = '';

const exampleRequest = XRequest({
  baseURL: BASE_URL + PATH,
  model: MODEL,

  /** 🔥🔥 Its dangerously! */
  // dangerouslyApiKey: API_KEY
});

const status = ref<ThoughtChainItem['status']>();
const lines = ref<Record<string, string>[]>([]);

async function request() {
  status.value = 'pending';

  await exampleRequest.create(
    {
      messages: [{ role: 'user', content: 'hello, who are u?' }],
      stream: true,
      agentId: 111,
    },
    {
      onSuccess: (messages) => {
        status.value = 'success';
        console.log('onSuccess', messages);
      },
      onError: (error) => {
        status.value = 'error';
        console.error('onError', error);
      },
      onUpdate: (msg) => {
        lines.value = [...lines.value, msg];
        console.log('onUpdate', msg);
      },
    },
  );
}

defineRender(() => {
  return (
    <Flex align="start" gap={16} style={{ overflow: 'auto' }}>
      <Button type="primary" disabled={status.value === 'pending'} onClick={request}>
        Request - {BASE_URL}
        {PATH}
      </Button>
      <ThoughtChain
        items={[
          {
            title: 'Request Log',
            status: status.value,
            icon: status.value === 'pending' ? <LoadingOutlined /> : <TagsOutlined />,
            description:
              status.value === 'error' &&
              exampleRequest.baseURL === BASE_URL + PATH &&
              'Please replace the BASE_URL, PATH, MODEL, API_KEY with your own values.',
            content: (
              <Descriptions column={1}>
                <Descriptions.Item label="Status">{status.value || '-'}</Descriptions.Item>
                <Descriptions.Item label="Update Times">{lines.value.length}</Descriptions.Item>
              </Descriptions>
            ),
          },
        ]}
      />
    </Flex>
  )
});
</script>

自定义入参

自定义 RequestParams，可以向智能体等发送消息。

Request Log

Status-

Update Times0

<script lang="tsx" setup>
import { LoadingOutlined, TagsOutlined } from '@ant-design/icons-vue';
import { Button, Descriptions, Flex } from 'ant-design-vue';
import { ThoughtChain, type ThoughtChainItem, XRequest } from 'ant-design-x-vue';
import { ref } from 'vue';

defineOptions({ name: 'AXXRequestRequestParams' });

const BASE_URL = 'https://api.example.com/agent';

const exampleRequest = XRequest({
  baseURL: BASE_URL,
});

interface RequestParams {
  agentId: number;
  query: string;
}

const status = ref<ThoughtChainItem['status']>();
const lines = ref<Record<string, string>[]>([]);

async function request() {
  status.value = 'pending';

  await exampleRequest.create<RequestParams>(
    {
      query: 'Search for the latest technology news',
      agentId: 111,
    },
    {
      onSuccess: (messages) => {
        status.value = 'success';
        console.log('onSuccess', messages);
      },
      onError: (error) => {
        status.value = 'error';
        console.error('onError', error);
      },
      onUpdate: (msg) => {
        lines.value = [...lines.value, msg];
        console.log('onUpdate', msg);
      },
    },
  );
}

defineRender(() => {
  return (
    <Flex>
      <Button type="primary" disabled={status.value === 'pending'} onClick={request}>
        Request - {BASE_URL}
      </Button>
      <ThoughtChain
        items={[
          {
            title: 'Request Log',
            status: status.value,
            icon: status.value === 'pending' ? <LoadingOutlined /> : <TagsOutlined />,
            description:
              status.value === 'error' &&
              exampleRequest.baseURL === BASE_URL &&
              'Please replace the BASE_URL, RequestParams with your own values.',
            content: (
              <Descriptions column={1}>
                <Descriptions.Item label="Status">{status.value || '-'}</Descriptions.Item>
                <Descriptions.Item label="Update Times">{lines.value.length}</Descriptions.Item>
              </Descriptions>
            ),
          },
        ]}
      />
    </Flex>
  );
});
</script>

自定义转换器

为 XRequest 配置自定义的 transformStream, 示例中使用 application/x-ndjson 数据演示

Mock Custom Protocol - Log

<script setup lang="tsx">
import { TagsOutlined } from '@ant-design/icons-vue';
import { Button, Flex } from 'ant-design-vue';
import { ThoughtChain, type ThoughtChainItem, XRequest } from 'ant-design-x-vue';
import { ref } from 'vue';

defineOptions({ name: 'AXXRequestCustomTransformer' });

const BASE_URL = 'https://api.example.host';
const PATH = '/chat';
const MODEL = 'gpt-4o';

const ND_JSON_SEPARATOR = '\n';

async function mockFetch() {
  const ndJsonData = `{data:{"id":"0","choices":[{"index":0,"delta":{"content":"Hello","role":"assistant"}}],"created":1733129200,"model":"gpt-4o"}}
{data:{"id":"1","choices":[{"index":1,"delta":{"content":"world!","role":"assistant"}}],"created":1733129300,"model":"gpt-4o"}}
{data:{"id":"2","choices":[{"index":2,"delta":{"content":"I","role":"assistant"}}],"created":1733129400,"model":"gpt-4o"}}
{data:{"id":"3","choices":[{"index":3,"delta":{"content":"am","role":"assistant"}}],"created":1733129500,"model":"gpt-4o"}}
{data:{"id":"4","choices":[{"index":4,"delta":{"content":"Ant Design X!","role":"assistant"}}],"created":1733129600,"model":"gpt-4o"}}`;

  const chunks = ndJsonData.split(ND_JSON_SEPARATOR);

  const response = new Response(
    new ReadableStream({
      async start(controller) {
        for (const chunk of chunks) {
          await new Promise((resolve) => setTimeout(resolve, 100));
          controller.enqueue(new TextEncoder().encode(chunk));
        }
        controller.close();
      },
    }),
    {
      headers: {
        'Content-Type': 'application/x-ndjson',
      },
    },
  );

  return response;
}

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

const status = ref<ThoughtChainItem['status']>();
const lines = ref<string[]>([]);

async function request() {
  status.value = 'pending';

  await exampleRequest.create(
    {
      messages: [{ role: 'user', content: 'hello, who are u?' }],
      stream: true,
    },
    {
      onSuccess: (messages) => {
        status.value = 'success';
        console.log('onSuccess', messages);
      },
      onError: (error) => {
        status.value = 'error';
        console.error('onError', error);
      },
      onUpdate: (msg) => {
        lines.value = [...lines.value, msg];
        console.log('onUpdate', msg);
      },
    },
    new TransformStream < string, string > ({
      transform(chunk, controller) {
        controller.enqueue(chunk);
      },
    }),
  );
}

defineRender(() => {
  return (
    <Flex align="start" gap={16} style={{ overflow: 'auto' }}>
      <Button type="primary" disabled={status.value === 'pending'} onClick={request}>
        Request - {BASE_URL}
        {PATH}
      </Button>
      <ThoughtChain
        items={[
          {
            title: 'Mock Custom Protocol - Log',
            status: status.value,
            icon: <TagsOutlined />,
            content: (
              <pre style={{ overflow: 'scroll' }}>
                <code>{lines.value.join(ND_JSON_SEPARATOR)}</code>
              </pre>
            ),
          },
        ]}
      />
    </Flex>
  )
});
</script>

模型接入

接入云服务平台，可发送请求、终止消息。

Request Logrequest undefined

Status-

Update Times0

<script lang="tsx" setup>
import { LoadingOutlined, TagsOutlined } from '@ant-design/icons-vue';
import { Button, Descriptions, Flex, Input, Typography } from 'ant-design-vue';
import { ThoughtChain, type ThoughtChainItem, XRequest } from 'ant-design-x-vue';
import { ref } from 'vue';

defineOptions({ name: 'AXXRequestModel' });

const { Paragraph } = Typography;
/**
 * 🔔 Please replace the BASE_URL, PATH, MODEL, API_KEY with your own values.
 */

const BASE_URL = 'https://api.x.ant.design/api/llm_siliconflow_deepseekv3';

/**
 * 🔔 The MODEL is fixed in the current request, please replace it with your BASE_UR and MODEL
 */

const MODEL = 'deepseek-ai/DeepSeek-V3';

/**
 * 🔔 the API_KEY is a placeholder indicator interface that has a built-in real API_KEY
 */

const API_KEY = 'Bearer sk-xxxxxxxxxxxxxxxxxxxx';

const exampleRequest = XRequest({
  baseURL: BASE_URL,
  model: MODEL,
  dangerouslyApiKey: API_KEY,
  /** 🔥🔥 Its dangerously! */
});

const status = ref<string>();
const thoughtChainStatus = ref<ThoughtChainItem['status']>();
const lines = ref<Record<string, string>[]>([]);
const questionText = ref<string>('hello, who are u?');
const abortController = ref<AbortController>(null);

const request = async () => {
  status.value = 'pending';
  lines.value = [];
  await exampleRequest.create(
    {
      messages: [{ role: 'user', content: questionText.value }],
      stream: true,
    },
    {
      onSuccess: () => {
        status.value = 'success';
        thoughtChainStatus.value = 'success';
      },
      onError: (error) => {
        if (error.name === 'AbortError') {
          status.value = 'abort';
        }
        thoughtChainStatus.value = 'error';
      },
      onUpdate: (msg) => {
        lines.value = [...lines.value, msg];
      },
      onStream: (controller) => {
        abortController.value = controller;
      },
    },
  );
};

const abort = () => {
  abortController.value?.abort?.();
};

defineRender(() => {
  return (
    <Flex gap={24}>
      <Flex vertical gap={24} style={{ maxWidth: '60%' }}>
        <Flex gap="large" vertical>
          <Input
            value={questionText.value}
            onChange={(e) => {
              questionText.value = e.target.value;
            }}
          />
          <Flex gap="small">
            <Button type="primary" disabled={status.value === 'pending'} onClick={request}>
              Request
            </Button>
            <Button type="primary" disabled={status.value !== 'pending'} onClick={abort}>
              Request Abort
            </Button>
          </Flex>
        </Flex>
        <Paragraph>{lines.value.length > 0 && JSON.stringify(lines.value)}</Paragraph>
      </Flex>
      <ThoughtChain
        items={[
          {
            title: 'Request Log',
            status: thoughtChainStatus.value,
            icon: status.value === 'pending' ? <LoadingOutlined /> : <TagsOutlined />,
            description: `request ${status.value}`,
            content: (
              <Descriptions column={1}>
                <Descriptions.Item label="Status">{status.value || '-'}</Descriptions.Item>
                <Descriptions.Item label="Update Times">{lines.value.length}</Descriptions.Item>
              </Descriptions>
            ),
          },
        ]}
      />
    </Flex>
  );
});
</script>

API

XRequestOptions

属性	描述	类型	默认值	版本
baseURL	API 请求的基础 URL	string	-	-
model	模型名称，例如 'gpt-3.5-turbo'	string	-	-
dangerouslyApiKey	注意: 🔥 `dangerouslyApiKey` 存在安全风险，对此有详细的说明。	string	-	-
fetch	可选的自定义 fetch 函数，用于发起请求	fetch	-	-

XRequestFunction

type XRequestFunction<Input = Record<PropertyKey, any>, Output = Record<string, string>> = (
  params: XRequestParams & Input,
  callbacks: XRequestCallbacks<Output>,
  transformStream?: XStreamOptions<Output>['transformStream'],
) => Promise<void>;

XRequestParams

属性	描述	类型	默认值	版本
model	生成响应时使用的模型。	string	-	-
messages	消息对象数组，每个对象包含角色和内容。	Record<PropertyKey, any>[]	-	-
stream	指示是否使用流式响应。	boolean	false	-

XRequestCallbacks

属性	描述	类型	默认值	版本
onSuccess	成功时的回调。	`(messages: Output[]) => void`	-	-
onError	错误处理的回调。	`(error: Error) => void`	-	-
onUpdate	消息更新的回调。	`(message: Output) => void`	-	-
transformStream	可选的转换函数，用于处理流数据	`XStreamOptions<Output>['transformStream']`	-	-

XRequest 请求 ​

何时使用 ​

代码演示 ​

基础 ​

自定义入参 ​

自定义转换器 ​

模型接入 ​

API ​

XRequestOptions ​

XRequestFunction ​

XRequestParams ​

XRequestCallbacks ​

XRequest 请求

何时使用

代码演示

基础

自定义入参

自定义转换器

模型接入

API

XRequestOptions

XRequestFunction

XRequestParams

XRequestCallbacks