vue项目如何接收ai流式数据并处理(markdown格式、数学公式)

ai返回的数据是一段一段，类似于长轮训，每次返回一小段

接收ai接口数据流的方式有很多种，可以参考下这种：

1.  下载插件："@microsoft/fetch-event-source": "^2.0.1"
2.  使用fetchEventSource函数的方法：例子地址https://gitcode.youkuaiyun.com/662a05869c80ea0d22721c57.html?dp_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MTE2MzQ1MCwiZXhwIjoxNzIxNjI2MzcwLCJpYXQiOjE3MjEwMjE1NzAsInVzZXJuYW1lIjoicXFfMjQ3OTQ3MTcifQ.e9rBvbdIw2q9ggsDZYuQZviyFSJcV3IhxE8RrlmrKpYtext/event-stream数据格式通常涉及在客户端或服务器端接收和解析数据流，这些数据被分为多个事件流（event stream），每个事件流由一个或多个字段组成。它通常使用长连接（长轮询），客户端和服务器保持连接直到完成或超时事件流以 data: 开头在fetchEventSource函数的onmessage(event) {使用event.data拿到数据，然后用JSON.parse转为json格式}

vue2项目中，如何使用marked.js 和 katex ，处理markdown数据格式、数学公式呢？

废话不多说，上干货！！！

第一步：安装插件

处理markdown格式下载：npm install marked@4.0.0 （高版本marked可能会出现版本不兼容问题）

处理数学公式下载：npm install vue-katex-auto-render@0.2.0 、npm install katex@0.16.21

第二步：如何使用

2.1处理markdown↓

1、在所需要用的页面引入marked 

2、然后将数据放置在其中，配置方面，官方还有很多配置，按需自配，

3、在结构中使用：v-html = “ 数据 ”

2.2处理数学公式：

1、这个很简单，在main.js内引入 （全局配置）

2、然后在所需页的结构上使用：v-katex

但是有一点要注意的就是，数学公式的格式要自行查看、调试、处理。

一般返回的数据是：\\( a^2+b^2\\)   这种格式可以被识别成正确的数学公式

     

问题：？但是由于被marked转换后，\\ 会被转义 变成 \ ，导致识别不到正确格式，从而你需要在使用marked之前，就将数据内的所有 \\ 转为 \\\\ ，还有要注意换行符 \n ，这个会导致整行公式换行，v-katex识别不到完整公式，所以也需要先将 换行符 \n 删除，见下图：

markdown格式的格式有很多种，需要自己额外学习如何去配置；

本次特殊处理：超链接 默认是点击后在当前页面打开，体验不好，则改为新标签页打开，就可以这样配置：

此文章也是为了让自己加深印象，写的不好，勿喷