uniapp使用ui.request 请求流式输出-EW帮帮网

正文：

在现代Web开发中，实时数据流和长时间运行的请求变得越来越常见，尤其是在处理大量数据或进行实时通信时。在这种情况下，uniapp 提供的 ui.request 请求方法可以帮助我们轻松实现流式输出请求。本文将介绍如何使用 uni.request 来实现流式数据请求，并处理实时返回的数据。

一、项目背景

假设你正在开发一款移动端应用，其中需要向服务器发起请求，获取大量文本数据，并且这些数据需要逐步输出，而不是一次性返回所有结果。这时候，流式请求是一个非常理想的解决方案，它可以在数据准备好后立即传输，而不需要等待完整的数据返回。

二、核心代码解析

在本篇博客中，我们将分享一个典型的实现流式请求的代码示例，帮助大家理解如何在 uniapp 中使用 ui.request 实现流式输出。

const requestTask = uni.request({
  url: '这是你的接口',
  method: 'post',
  header: {},
  enableChunked: true,  // 启用分块传输
  responseType: 'text', // 响应类型为文本
  data: {},
  success: (res) => {
    console.log(res, '文本');
  },
  fail: (err) => {
    console.error('请求失败:', err);
  }
});

// 处理流式输出
requestTask.onChunkReceived((res) => {
  this.xianshi_tt = false
   //用来解析
  let uint8Array = new TextDecoder('utf-8')
  let decodedString = uint8Array.decode(res.data)
  let dataList = decodedString.split('\n\n')
  dataList.forEach((item) => {
    if (item) {
      let gg = JSON.parse(item.replace('data:', ''));
      let content = gg.choices[0]..reasoning_content;
      // 检查 content 是否有效并且不为空
      if (content && content !== "" && content !== undefined) {
        // 检查 content 是否已经存在于 streamData 中，防止重复
        if (!this.streamData.includes(content)) {
          this.streamData.push(content);
        }
      }
    }
  })
  // 转换数组为字符串
  this.wenan_content = this.streamData.join(''); // 将数组转化为换行分隔的字符串
});

三、关键参数解析

1. enableChunked: true

在进行流式数据请求时，enableChunked: true 是一个非常关键的配置项。它允许我们启用 HTTP 分块传输（Chunked Transfer Encoding），这样服务器可以在数据准备好时就开始传输，而不必等到整个响应完成。

2. responseType: 'text'

responseType: 'text' 指定了我们接收的数据类型为文本格式。通常在处理流式输出时，文本数据会更容易进行解析和处理。

3. onChunkReceived

流式输出的处理主要通过 onChunkReceived 方法来实现。每当服务器发送新的数据块时，这个回调函数就会被触发，里面的逻辑会逐步接收和处理这些数据。

TextDecoder 是用来将 Uint8Array 数据解码为字符串的工具。在处理流式数据时，我们会获取到分块的字节流，需要将其解码为字符串以便进一步操作。
数据被解码后，通过 split('\n\n') 将文本按段落进行拆分，每一段数据都会被处理。

4. 数据处理逻辑

我们从 gg.choices[0]..reasoning_content 中提取出需要的文本数据，然后进行一系列的检查：

确保内容有效（非空且未定义）。
确保内容没有重复。

最后，通过 this.streamData.push(content) 将内容添加到 streamData 数组中，形成完整的文本内容。

5. 拼接字符串

所有有效的内容都被存储在 this.streamData 数组中。在数据流逐步输出的过程中，最终会通过 this.wenan_content = this.streamData.join(''); 将数组中的所有内容拼接成一个完整的字符串，从而实现流式输出。

四、流式请求的优势

提高响应速度： 流式请求允许客户端在数据逐步返回的过程中即时获取并处理数据，而不需要等待完整的数据返回。
减少内存占用： 不需要将所有数据一次性加载到内存中，而是分批处理，可以有效减小内存压力。
实时显示： 对于用户而言，流式输出可以实现数据的实时显示，提升用户体验。

五、总结

通过 uniapp 中的 ui.request 配合 enableChunked: true 配置，我们可以非常方便地实现流式输出请求。这种方法适用于需要实时获取和显示大量数据的应用场景，能够显著提高应用的响应速度和用户体验。希望本文的代码示例和解析能帮助你更好地理解流式请求的实现与应用。

uniapp使用ui.request 请求流式输出