解决微信小程序中调用流式接口，处理二进制数据时 TextDecoder 不兼容的问题

问题复现

      最近在开发一个 AI 问答小程序时，由于接口返回的是流式二进制数据，因此我使用了 TextDecoder 的 decode 方法将二进制数据转换为文本。在开发环境中，数据处理一直没有问题，但在真机测试及上线后，发现调用接口时出现了 TextDecoder is not defined 的报错，导致数据无法正常显示。最终发现，问题出在 TextDecoder 这个 Web API 在小程序的生产环境中并不兼容。

解决方案

一开始，我尝试了很多解决 TextDecoder 兼容性问题的库，例如 text-encoding、text-encoding-polyfill 和 buffer，但都没有完全解决问题。最后，我决定手写一个 TextDecoder 的实现，并将其挂载到全局。废话不多说，直接上代码，各位大哥直接复制粘贴即可。

// TextDecoder polyfill
if (typeof TextDecoder === 'undefined') {class TextDecoder {constructor(encoding = 'utf-8') {this.encoding = encoding.toLowerCase();}decode(dataView) {let data;if (dataView instanceof ArrayBuffer) {data = new Uint8Array(dataView);} else if (dataView instanceof Uint8Array) {data = dataView;} else {throw new Error('参数必须是 ArrayBuffer 或 Uint8Array');}if (this.encoding === 'utf-8') {return this._decodeUTF8(data);} else {throw new Error('当前只支持 UTF-8 编码');}}_decodeUTF8(data) {let str = '';let i = 0;while (i < data.length) {let byte1 = data[i];let char;// ASCII 字符if (byte1 < 0x80) {char = String.fromCharCode(byte1);i += 1;}// 2字节序列else if (byte1 < 0xE0) {const byte2 = data[i + 1];char = String.fromCharCode(((byte1 & 0x1F) << 6) | (byte2 & 0x3F));i += 2;}// 3字节序列else if (byte1 < 0xF0) {const byte2 = data[i + 1];const byte3 = data[i + 2];char = String.fromCharCode(((byte1 & 0x0F) << 12) |((byte2 & 0x3F) << 6) |(byte3 & 0x3F));i += 3;}// 4字节序列else {const byte2 = data[i + 1];const byte3 = data[i + 2];const byte4 = data[i + 3];let codepoint = ((byte1 & 0x07) << 18) |((byte2 & 0x3F) << 12) |((byte3 & 0x3F) << 6) |(byte4 & 0x3F);// UTF-16 surrogate paircodepoint -= 0x10000;const highSurrogate = (codepoint >> 10) + 0xD800;const lowSurrogate = (codepoint & 0x3FF) + 0xDC00;char = String.fromCharCode(highSurrogate, lowSurrogate);i += 4;}str += char;}return str;}}// 全局注入 TextDecoderglobalThis.TextDecoder = TextDecoder;
}

新建一个 textDecoder.js 文件，将自定义的 TextDecoder 代码放入其中。然后在 app.js 中通过 import 进行导入。这样，我们的 TextDecoder 就可以在生产环境中正常使用了。

// app.js
const request = require('./utils/request')
import './utils/textDecoder'
App({onLaunch() {// 展示本地存储能力const logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登录request.login();},globalData: {userInfo: null}
})