Uniapp 小程序实现Stream流式输出

1.封装一个fetch方法 

  function fetch(params: params) {
    const task = uni.request({
      url: params.url,
      method: params.method,
      enableChunked: true, //注意配置
      data: params,
      header: params.header,
      success: (res) => {},
      fail: (err) => {},
      complete: () => {}
    })

    return task
  }

 2.使用TextDecoder转换编码

requestTask.onChunkReceived(function(res) {
  let decoder = new TextDecoder('utf-8')
  let text = decoder.decode(new Uint8Array(res.data))
  console.log(text)
})

### UniApp实现流式响应 在 UniApp 小程序开发中,为了实现实时的数据推送并提升用户体验,可以采用 `uni.request` 结合 `Transfer-Encoding: chunked` 来处理流式响应。这种方式使得服务器能够以分块的形式向客户端发送数据,在接收到每一块数据之后立即展示给用户。 #### 使用 `uni.request` 发起请求 通过配置 `uni.request` 方法中的选项参数,特别是设置合适的 HTTP 头部字段如 `Transfer-Encoding: chunked` ,可以让服务端知晓应按照何种方式返回数据。当涉及到流媒体或者其他形式的大文件下载时尤为有用[^1]。 ```javascript // JavaScript (Vue.js method) methods: { fetchStreamData() { uni.request({ url: 'https://example.com/stream', // 替换成实际接口地址 header: {'Transfer-Encoding': 'chunked'}, responseType: 'text', success(res) { console.log('Received data:', res.data); // 对获取到的数据做进一步处理... }, fail(err) { console.error('Error occurred while fetching stream data.', err); } }); } } ``` #### 数据接收与显示优化 考虑到网络状况可能不稳定以及不同设备间的性能差异,建议对接收来的流式数据进行缓存管理,并适时刷新页面上的相关内容。这不仅有助于提高应用稳定性,也能让用户感受到更加平滑的操作体验[^3]。 例如可以在每次成功读取一部分新内容后立即将其追加至现有视图之中: ```html <!-- HTML --> <template> <view id="stream-container"> <!-- 动态加载更多消息 --> {{ streamedContent }} </view> </template> <script> export default { data(){ return{ streamedContent : '' }; }, methods:{ appendToStream(newChunk){ this.streamedContent += newChunk; } } }; </script> ```
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值