前言
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中，解码的过程包含了多个管道：
- 通过
TextDecoderStream将二进制Unit8Array转为string； - 通过
splitStream进一步拆分字符串； - 通过
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返回的字符串，即可自动以流式渲染的动效来呈现智能问答的交互。