前言

AI是未来世界的趋势，deepseek的出现让在国内构建更多的大模型出现了更多的可能。而从前端出发，Ant design团队最近很有意思，基于这个背景，提供了一套面向构建平台化产品的组件。

本篇结合Ant design AI的XSteam、XRequestapi来分析。

流式响应

XRequest

仔细看一下官方文档XRequest的内容，发现篇幅并不多，对比市面上比较多的useRequest，核心增加了以sse流的形式进行片段式响应的能力。

核心能力需要在入参中传递stream，即可开启流式响应的能力，直接在api的callback中处理渲染逻辑即可，那我们看一下源码，stream开启后做了些什么。

请求创建实例的前半部分，与标准请求没什么区别，只是在响应后，XRequest中对response header的contentType做了区分，如果是text/event-stream类型，则属于SSE流式请求，则会进入sseReponseHandler官方内置的响应体处理流程中。

如果需要自定义处理SSE响应，则传入customReponseHandler即可。

那接下来我们来看一下官方内置的处理是如何实现的，找到sseReponseHandler：

可以看到这个函数基于response、callbacks处理了流的响应体同时进行了异步迭代的回调。

• chunks数组：存储从XStream中的将流二进制数据转换成逻辑单元的结果；
• for await：通过异步迭代批次回调通知调用者；
• onSuccess：最终完成回调；

那奥秘就在XStream中了，它具体做了什么处理将response转换成了chunk？

XStream

在XStream中，解码的过程包含了多个管道：

1. 通过TextDecoderStream将二进制Unit8Array转为string；
2. 通过splitStream进一步拆分字符串；
3. 通过splitPart进一步拆分流，变成最后的结果，返回到XRequest中，作为回调结果；

splitStream 用于将一个长字符串流分割为小的事件块，每个事件之间以\n\n拆分，每个块表示一个完整的 SSE 事件：

splitPart 在基础上，进一步将每个事件数据块按 \n 和 : 分割为键值对（SSEOutput），代表每个事件的结构化数据格式。

最后XStream将每一次"AI大模型请求"返回的流二进制数据，转换成了key value的键值对形式的数据，因此XStream其实也是XRequest核心的基于原生的原子能力。

流式渲染

流式渲染是啥？大白话讲就是大模型回复用户消息的打字效果，这个效果在Ant Design X是怎么实现的？以Bubble组件来举例：

通过设置typing属性，在Bubble组件渲染到页面的时候，就会以打字效果呈现，可通过两个参数来控制文本渲染的速度：

• step：每一次渲染的文本数量；
• interval：每一次渲染的间隔时间；

查看Bubble组件传入的content是完整、一次性传入的一个字符串，因此这里的流式效果就和上面的XStream底层依赖的sse不一样，因此可以推断该组件场景适用于AI的返回结构是完整的字符串，采用前端流式渲染来实现人机对话的效果。

那看一下源码是怎么实现这个效果的。

源码中涉及typing的的主要逻辑包括了两个hooks：

• useTypingConfig：根据typing传的配置重新merge了一下；
• useTypedEffect：看起来是定时更新渲染到页面的内容的核心实现函数了；

我们看一下useTypedEffect的实现：

从函数看，还是比较好理解的，useTypedEffect有4个变量，分别有对应的职责：

• content：最终渲染的结果，如"我是AI，这是我告诉你的答案"；
• typingEnabled：是否渲染完成；
• typingStep：渲染到第几轮；
• typingInterval：每一轮渲染间隔的时间；

单个组件通过不断的副作用到组件中，直到组件的content渲染完成，才停止副作用，这是整个主要逻辑，看起来还是实现的比较巧妙的。

结尾

本文我们了解了面向构建高效大模型语言平台的前端框架Ant Design X，通过源码分析了解了API流式请求响应XRequest、底层流XStream的转换通道以及UI组件Bubble通过打字效果实现流式渲染的原理。

XRequest底层实现仍然是fetch，不同的是在流式的场景中，底层依赖XStream基于对sse请求的响应体进行转换到最终的异步响应实现了流式响应。

Bubble通过开启typing props，实现组件只需传入AI返回的字符串，即可自动以流式渲染的动效来呈现智能问答的交互。