js 对返回的流式数据处理,字符串拼接乱码问题解决

js 对流文件处理

// 获取 reader 对象
        const reader = response.body.getReader();
        // 定义一个解码器
        const decoder = new TextDecoder();
        let raw_resp = "";
        // 定义一个循环函数
        function read() {
          // 读取数据块
          reader.read().then(({ value, done }) => {
            // 如果读取完毕，退出循环
            if (done) {
              return;
            }
            // 将数据块转换为字符串
            const chunk = decoder.decode(value);
            raw_resp = raw_resp + chunk;
            let msg = [];
            const lines = raw_resp.split("\n");
            for (const line of lines) {
              if (line === "" || line.startsWith(":")) {
                continue;
              }
              if (line.startsWith("data:")) {
                try {
                  msg.push(JSON.parse(line.slice(5)).completion);
                  props.onMessage({
                    text: msg.join(''),
                  });
                } catch {
                  continue;
                }
              }
            }
            read();
          });
        }
        // 开始循环读取
        read();
        setStatus("success");

如果msg拼接为

msg = msg + JSON.parse(line.slice(5)).completion;

拼接的字符串会出现乱码问题,出现的原因有:

1. TextDecoder默认使用utf-8解码,但响应体可能不是utf-8编码,从而导致解码错误。 2. response.body以流的形式返回,多次read()读取到的chunk需要拼接后再解码,直接解码chunk可能出现错位。 3. JSON.parse解析时,如果解码出错,会直接跳过异常,导致msg带有错误数据。 4. msg的内容来源是AI对话系统的响应,如果响应内容本身存在编码问题也会导致解码错误。 5. msg字符串的拼接方式直接使用+号,如果内容中有中文,可能导致乱码。

建议修改如下:

检查response的编码,并传入正确的encoding参数创建TextDecoder。

尝试decode后再拼接内容,避免解码错位。

在JSON.parse之前先判断内容是否完整的JSON字符串。

在拼接msg时转换为数组再join,确保拼接方式正确。

给JSON.parse加try catch处理解码错误。

上面的代码才用,在拼接msg时转换为数组再join,问题解决了

有关使用上的问题，欢迎您在底部评论区留言，一起交流~

读者评论