分享记录微信小程序实现打字机效果及相关业务场景

分享记录微信小程序实现打字机效果及相关业务场景，最近有个项目是关于ai对话的，本来想用sse实现数据分流传输实现打字效果，但是查询了相关文档，sse不支持小程序，不过小程序api提供了另一种数据流式分片传输，可以实现当前业务场景，话不多说，开整。

一、代码实现
只需要在请求配置中加上enableChunked: true,即可启动分流传输
let requestTask=uni.request({
      header: {
        "Content-Type": "application/json",
        "Accept-Language": "zh",
        Token: token.value
      },
      url,
      method: "POST",
      enableChunked: true,
      data: params,
      success(res) {
        console.log(res);
      },
      fail(err) {
        console.log(err);
      }
    });
requestTask.onChunkReceived(response => {
console.log(response)
})
当启动分流传输后，response中能看到分流传输的数据，此时我们在onChunkReceived的回调中可以获取数据，
直到数据完全请求完成才会在success中响应，success的data不管有没有数据都是返回的空（听我们后端说开启enableChunked
后无法像往常的接口一样在response中获取状态码及响应信息，说返回的数据不走那边，所以success的data基本上是固定的）
当获取到数据时，需要对数据处理才能使用
requestTask.onChunkReceived(response => {
      console.log(response);
      let unit8Arr = new Uint8Array(response.data);
      let encodedString = String.fromCharCode.apply(null, unit8Arr),
        decodedString = decodeURIComponent(escape(encodedString)); //没有这一步中文会乱码
      console.log(decodedString);
    })

二、效果截图

三、整体代码

async function chatRequest(params, onChunkReceived) {
  return new Promise((resolve, reject) => {
    let requestTask = uni.request({
      header: {
        "Content-Type": "application/json",
        "Accept-Language": "zh",
        Token: token.value
      },
      url: `${domain}/api/openAI/chat`,
      method: "POST",
      enableChunked: true,
      data: params,
      success(res) {
        console.log(res, "请求成功");
        resolve(res);
      },
      fail(err) {
        console.log(err);
        reject(err);
      }
      // complete: async () => {
      //   await userStore.getUserInfo();
      // }
    });
    requestTask.onChunkReceived(response => {
      console.log(response);
      let unit8Arr = new Uint8Array(response.data);
      let encodedString = String.fromCharCode.apply(null, unit8Arr),
      decodedString = decodeURIComponent(escape(encodedString)); //没有这一步中文会乱码
      console.log(decodedString);
    });
  });
}

四、总结
之前做过sse实现这种效果，小程序的enableChunked要比sse简单，只不过接收到数据转码比较麻烦，对于h5来说小程序还是有很多的限制，不过基本上都能解决，希望这篇记录能够帮到你