主要思路来源请问一下在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的原因主要也在这里
5023

被折叠的 条评论
为什么被折叠?



