uniapp无法使用fetch的解决方案;uniapp的流式输出无法立刻展示解决方案;uni.request进行流式输出的延迟问题导致后端即时返回内容但是前端无法立刻流式输出的解决方案;

主要思路来源请问一下在uniapp里面可以使用fetch方法吗 - DCloud问答

问题原因:uniapp使用uni.request请求流式数据,该方法必须等待后端全部传完数据之后再返回到前端,这就造成后端虽然是立刻输出,但是在前端还需要一直等待的问题

解决方案:使用renderjs+fetch替代uni.request

具体实施
开始:
我们可以直接告诉AI:目前该页面使用uni.request导致必须后端全部传完数据之后才响应前端触发回调,导致严重延迟,请使用renderjs + fetch技术替换uni.request请求数据(注意:该方法写完之后还要进行抛出,使用this.$ownerInstance.callMethod),注意:只更改数数据的响应方式,别的处理逻辑都不要动,以下是参考代码

结束;

下面是核心请求代码,大家可以把这个和上面的提示词一起发给AI,进行一样的uni.request替换处理,基本上clause4可以一次性完成,上面的提示语我也是经过大几个小时不断试错调研总结出来的


<!-- APP端流式请求renderjs脚本 -->
<!-- #ifndef H5 -->
<script module="appStreamHandler" lang="renderjs">
export default {
  methods: {
    // 处理流式请求
    handleStreamRequest(newVal, _oldVal, _ownerInstance) {
      if (!newVal || !newVal.url) return

      console.log('🔥 renderjs开始处理流式请求:', newVal)

      const { url, method, headers, body, messageIndex } = newVal

      // 使用fetch进行流式请求
      fetch(url, {
        method: method,
        headers: headers,
        body: body
      })
      .then(response => {
        console.log('🔥 renderjs获得响应:', response)

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`)
        }

        // 获取reader进行流式读取
        const reader = response.body.getReader()
        const decoder = new TextDecoder()

        // 递归读取流式数据
        const readStream = async () => {
          try {
            const { done, value } = await reader.read()

            if (done) {
              console.log('🔥 renderjs流式读取完成')
              // 通知主线程完成
              this.$ownerInstance.callMethod('handleAppStreamData', {
                chunk: null,
                messageIndex: messageIndex,
                finished: true
              })
              return
            }

            // 解码数据块
            const chunk = decoder.decode(value, { stream: true })
            console.log('🔥 renderjs接收数据块:', chunk)

            // 发送数据块到主线程
            this.$ownerInstance.callMethod('handleAppStreamData', {
              chunk: chunk,
              messageIndex: messageIndex,
              finished: false
            })

            // 继续读取下一块
            return readStream()
          } catch (error) {
            console.error('🔥 读取流数据错误:', error)
            this.$ownerInstance.callMethod('handleAppStreamError', {
              error: error.message,
              messageIndex: messageIndex
            })
          }
        }

        // 开始读取流
        return readStream()
      })
      .catch(error => {
        console.error('🔥 renderjs流式请求错误:', error)
        // 通知主线程错误
        this.$ownerInstance.callMethod('handleAppStreamError', {
          error: error.message,
          messageIndex: messageIndex
        })
      })
    }
  }
}
</script>
<!-- #endif -->

这里面最重点的事'抛出'这一步,我们在uni里面用renderjs + fetch技术写完之后,可以实时拿到后端流式输出数据,而页面一直不展示的原因就在这里,说直白了就是该方法没有和页面做到实时交互,需要我们再加个'抛出操作',就可以解决这个问题了,uni之所以无法使用fetch的原因主要也在这里

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值