等待服务端响应请求

在传统模式(古早)下前端加载的数据量较大时候等待时间比较长，影响体验。。

这里的代码，在调试工具限制网速下使用的

  function ajax(){
    $.ajax({
    url:"http://localhost/novel.txt",
    data:{},
    dataType:"TEXT",
    type:"GET",
    success:function(result){
      console.log(result);
    }
  })
  }
  ajax();

请求响应流程图

fetch api进行流处理

流处理概念

流处理在后端开发中也是一个常见的概念，它广泛应用于各种编程语言和服务器中，但是在前端js中实现的比较晚在2015年主流浏览器才支持

流处理（Stream processing）是指对数据流（数据在时间上连续产生的序列）的实时处理。在编程中，流可以包含多种数据元素，比如字节、字符、比特或更高层次的数据结构。

打比方go或php语言中。数据流存储到buffer里面

    // 读取客户端发送的数据
    var buf []byte
    tmp := make([]byte, 512) // 临时缓冲区，每次读取的数据先暂存到这里
    for {
        // 读取数据到临时缓冲区
        n, err := conn.Read(tmp)
        if err != nil {
            if err != io.EOF {
                log.Println("Failed to read from socket:", err)
            }
            break
        }
        // 将临时缓冲区的数据追加到 buf 中
        buf = append(buf, tmp[:n]...)
        // 如果读取的数据长度小于缓冲区大小，则说明数据已经读取完毕
        if n < len(tmp) {
            break
        }
    }

使用fetch进行流处理

下面代码使用了async和await

  async function load() {
    const url = "http://localhost/novel.txt";
    const resp = await fetch(url);
    const reader = resp.body.getReader();
    const decoder = new TextDecoder();

    let result = '';

    for (; ;) {
      const {value, done} = await reader.read();
      if (done) {
        break;
      }
      const text = decoder.decode(value);
      result += text;
      console.log(text);
    }

    // 确保将解码器的内部缓冲区中的任何剩余输入刷新为字符串
    result += decoder.decode();

  }

结果输出为

  async function loadNovel() {
    const url = "http://localhost/novel.txt";
    const resp = await fetch(url);
    const reader = resp.body.getReader();
    const decoder = new TextDecoder();

    let result = '';

    for (; ;) {
      const {value, done} = await reader.read();
      if (done) {
        break;
      }
      // 注意：此处传递 { stream: true } 以确保跨数据块的字符不会导致乱码
      const text = decoder.decode(value, {stream: true});
      result += text;
      console.log(text);
    }

    // 确保将解码器的内部缓冲区中的任何剩余输入刷新为字符串
    result += decoder.decode();

    console.log(result);
  }

使用Uint8Array来处理utf8多字节字符

utf8编码

在 UTF-8 编码中，一个 "字符" 可能由一个或多个字节组成。UTF-8 使用以下比特模式作为字节的前缀，以标识字符的开始以及随后的字节：

11110xxx 10xxxxxx 10xxxxxx 10xxxxxx

Uint8Array使用

Uint8Array 用于两个主要目的：

• 存储及拼接字节数据： Uint8Array 是一种类型化数组，用于表示一个8位无符号整数的数组。在这段代码中，它用于存储来自数据流的字节和处理 UTF-8 编码的文本数据。当有剩余的字节（即之前的数据块的末尾和新数据块的开始可能包含一个字符的一部分）时，Uint8Array 用于将前面块中剩余的字节和当前块的字节拼接在一起，以确保字符的完整性并避免乱码。
• 找到完整的 UTF-8 字符边界： UTF-8 编码的多字节字符可能会分布在数据块的边界上。这个代码片段使用 Uint8Array 来检查字节流，并确定一个字符的起始点。UTF-8 编码中，一个字符由一个单字节（对于ASCII字符）或多个字节组成（对于非ASCII字符）。

因为一个字节等于8bit所以用Uint8Array更方便

代码实现如下：

  async function loadTxt() {
    const url = "http://localhost/novel.txt";
    const resp = await fetch(url);
    const reader = resp.body.getReader();
    const decoder = new TextDecoder('utf-8');
    let leftoverBytes;

    while (true) {
      const {value, done} = await reader.read();
      if (done) {
        if (leftoverBytes) {
          console.log(decoder.decode(leftoverBytes));
        }
        break;
      }

      let currentUint8Array = value;
      if (leftoverBytes) {
        console.log(leftoverBytes.length + value.length);
        //传递字节数
        currentUint8Array = new Uint8Array(leftoverBytes.length + value.length);
        currentUint8Array.set(leftoverBytes);
        currentUint8Array.set(value, leftoverBytes.length);
      }
      console.log(value);
      // 确定最后一个完整字符的结尾
      let lastCompleteCharIndex = currentUint8Array.length;
      // 从末尾开始逐字节减少搜索范围直到找到一个文本字符的起始字节
      for (let i = currentUint8Array.length - 1; i >= 0; i--) {
        if ((currentUint8Array[i] & 0xC0) !== 0x80) { // 寻找非后续字节
          lastCompleteCharIndex = i;
          break;
        }
      }

      // 解码最后一个完整字符以前的所有字符
      const completeValue = currentUint8Array.slice(0, lastCompleteCharIndex);
      // 由于用uint8array处理后，就不用{stream: true}这个配置了
      console.log(decoder.decode(completeValue));

      // 存储剩余的没有解码的字节
      leftoverBytes = currentUint8Array.slice(lastCompleteCharIndex);
    }
  }

UTF-8 的一个重要特性是它的自同步：多字节字符的第一个字节以二进制的“11”开始，后续字节都以“10”开始。检查字节流的 for 循环利用这个属性来确定最后一个完整字符的边界，避免将数据切成半个字符，从而导致解码错误。

使用 Uint8Array 是处理二进制数据的有效方式，特别是在需要精确控制字节级操作的场景中。在这种情况下，使用 Uint8Array 可以精确地处理和解析字节流中的 UTF-8 编码字符。通过正确识别字符边界，确保解码操作能够在数据块之间正确地恢复完整的文本信息。

关键代码解读

1

//length这个长度是字节
currentUint8Array = new Uint8Array(leftoverBytes.length + value.length);

//创建了一个新的 Uint8Array，其长度是 leftoverBytes 数组的长度加上新读取的 value 数组的长度。这样确保了有足够的空间来存储两者的数据。----- 单位 字节

currentUint8Array.set(leftoverBytes);
//将一个数组复制到 TypedArray。此行代码将 leftoverBytes 中的数据复制到新创建的 currentUint8Array 的开头位置

currentUint8Array.set(value, leftoverBytes.length);
//同样使用 set() 方法，但此时是将新读取的 value 数组的内容复制到 currentUint8Array 中，紧随 leftoverBytes 存储的数据之后。参数 leftoverBytes.length 指定了 value 复制内容的起始位置 

2

        if ((currentUint8Array[i] & 0xC0) !== 0x80) { // 寻找非后续字节
          lastCompleteCharIndex = i;
          break;
        }

currentUint8Array[i] & 0xC0实际上是将当前字节与11000000（即0xC0）进行按位与操作 。这个操作会保留当前字节的最高两位，其他位则变为0。

& 按位与（AND）运算是一个二进制操作，它对两个数中的对应位进行逻辑与操作，如果两位都为1，则结果位为1，否则为0。