微信小程序实现sse 数据流，

1、使用wx.request() 实现sse 数据流

微信小程序目前的Api不支持sse协议的接口，使用wx.request()接口来实现该功能。在wx.request中开启enableChunked之后，会在响应头中开启 transfer-encoding: chunked，直接支持流式传输，只要在RequestTask中调用onChunkReceived 方法即可监听Transfer-Encoding Chunk Received事件。

作者：某哈压力大
链接：https://juejin.cn/post/7390336287956746266
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

  enableChunked:true,
  responseType:'arraybuffer',

2、接收数据在onChunkReceived 函数里

requestTask.onChunkReceived( res => {}

3、后端返回数据为arrayBuffer 格式

![1746579819364.png](https://upload-images.jianshu.io/upload_images/3894103-92b1d00769a0b435.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

4、注意事项，模拟器和真机返回的数据格式有点差异，需要使用Uint8Array 转换一下，由于微信小程序原生api 并不支持sse ,需要后端同时配合更改sse 数据流返回格式（与普通web 返回方式不同）

  const uint8Array = new Uint8Array(res.data);

5、因为接收到的结果数据类型固定为arrayBuffer，需要进行转换，可以使用下面方法进行转换

utf8ArrayToStr(array, startingIndex = 0) {
    const len = array.length;
    let c;
    let char2;
    let char3;
    let out = '';
    let i = startingIndex || 0;
    while (i < len) {
      c = array[i++];
      // If the character is 3 (END_OF_TEXT) or 0 (NULL) then skip it
      if (c === 0x00 || c === 0x03) {
        continue;
      }
      switch (c >> 4) {
        case 0:
        case 1:
        case 2:
        case 3:
        case 4:
        case 5:
        case 6:
        case 7:
          // 0xxxxxxx
          out += String.fromCharCode(c);
          break;
        case 12:
        case 13:
          // 110x xxxx   10xx xxxx
          char2 = array[i++];
          out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
          break;
        case 14:
          // 1110 xxxx  10xx xxxx  10xx xxxx
          char2 = array[i++];
          char3 = array[i++];
          out += String.fromCharCode(((c & 0x0F) << 12) |
            ((char2 & 0x3F) << 6) |
            ((char3 & 0x3F) << 0));
          break;
        default:
      }
    }
    return out;
  },

6、完整示例

let requestTask = wx.request({ // 获取用户是否以及认证
      method: 'POST',
      url: '后端请求地址’,
      enableChunked:true,
      responseType:'arraybuffer',
      timeout:6*60*1000,
      header: {
        'Content-Type': 'application/json; charset=UTF-8',
        'token':wx.getStorageSync('token')
      },
      data,
      
      fail:res=>{
       
        wx.showToast({
          title: `服务异常，请联系管理员`,
          duration: 3000,
          icon:'error'
        })
      }
    })
 requestTask.onChunkReceived( res => {
  // 使用 Uint8Array 视图操作数据
  const uint8Array = new Uint8Array(res.data);
  let data = this.utf8ArrayToStr(uint8Array) //  处理后的数据
  console.log('data=',data)
}）

1746580066773.png

后端返回数据处理后的数据

1746580077720.png