小程序实现流式数据（打字机）效果输出
小程序实现打字机流式数据输出，有两种方案，一种就是小程序自身实现，另外一种就是使webView转接到 h5 间接实现。 小程序自身实现就是用 uni.request 的 enableChunked 分块数据配置项 const requestTask = uni.request({
url: '服务地址',
timeout: 100000,
responseType: 'text',
method: 'GET',
enableChunked: true, //配置这里
data: {},
})
// 返回的 requestTask 拥有一个 onChunkReceived 监听回调
onChunkReceived 的回调参数：
res:data (ArrayBuffer)：接收到的分块数据。
requestTask.onChunkReceived(res => {
// res 流式数据 注意：这里可能是多块数据，服务推送多次信息，onChunkReceived只响应一次，则该次监听的内容就是服务器推送多次拼接在一起的字符串，需要单独裁剪额外处理
try {
// 解码分块数据
const uint8Array = new Uint8Array(res.data);
let test = String.fromCharCode.apply(null, uint8Array);
test = decodeURIComponent(escape(test));
let testArr = test.split('data:');
console.log(testArr, '====9999==='); // 这里就是服务器推送的原始内容
// 后续用户自己的操作。。。
}
catch(err){
console.error('推送数据结构异常！', err);
}
})
requestTask.abort() // 手动关闭链接
webView转接到 h5 间接实现 使用 h5 内嵌的话，那就正常跟 web端实现一样，使用 EventSource（单项数据流） 实例（因为小程序端没有 EventSource 实例，所以不可用），EventSource 方案只支持 get 请求，所以传参可能会复杂些 let eventSource = new EventSource('服务链接+传参');
eventSource.onopen = (e) => {
// 链接建立成功的钩子
}
eventSource.onerror= (e) => {
// 链接异常抛出的钩子
}
eventSource.onmessage = (e) => {
// 服务端推送信息捕获的钩子，服务端推送一次就会触发一次 https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource/EventSource
}
eventSource.close() // 手动关闭链接
每日健身打卡助手