微信小程序ChatGpt流式响应

最近用微信小程序做chatGpt的Ai对话，其中重要的一点就是流式响应，现在分享处理逻辑，先给演示图。

 下面是关键代码实现逻辑

      const that = this;
      const requestTask = wx.request({
        url: 'xxxxx',
        responseType: "arraybuffer",
        method: 'POST',
        enableChunked: true,
        header: {
          'content-type': 'application/json'
        },
        data: {
          'prompt': '青椒肉丝怎么做'
        },
        success: (res) => {
          console.log("request success", res);
          common_vendor.index.showToast({
            title: "请求成功",
            icon: "success",
            mask: true,
            duration
          });
          // this.res = "请求结果 : " + JSON.stringify(res);
        },
        fail: (err) => {
          console.log("request fail", err);
          common_vendor.index.showModal({
            content: err.errMsg,
            showCancel: false
          });
        },
        complete: () => {
          this.loading = false;
        }
      });
      requestTask.onHeadersReceived(function (r) {
        console.log(r);
      });
      requestTask.onChunkReceived(function (r) {
        // let decoder = new TextDecoder('utf-8');
        // let str = decoder.decode(new Uint8Array(r.data));

        // let en = String.fromCharCode.apply(null,new Uint8Array(r.data));
        // let de = decodeURIComponent(escape(en));

        // console.log("onChunkReceived", str);

        const data16 = that.buf2hex(r.data)	// ArrayBuffer转16进制
        const requestData = that.hexToStr(data16) // 16进制转字符串
        console.log(requestData); 
        that.res +=requestData;
      });

其中有两个关键点需要注意

1.enableChunked: true流式响应开关，会自动在header中加入transfer-encoding chunked

2.arraybuffer转字符串问题，有TextDecoder就很好处理，没有也可以参照我上面的示例。

最后提供免费源码下载地址和演示二维码，全量保真。

源码下载 ChatGpt插件，支持聊天，流式输出，UI漂亮，有小程序演示 - DCloud 插件市场