UniApp 微信小程序流式请求实战：解决中文乱码问题

UniApp 微信小程序流式请求实战：解决中文乱码问题

前言

在开发 UniApp 微信小程序时，实现流式请求（Streaming Request）是一项常见需求，特别是在处理 AI 对话、实时数据推送等场景。然而，微信小程序环境与浏览器环境存在差异，直接使用 URLSearchParams 和 FormData 会遇到兼容性问题，而且流式响应中的中文容易出现乱码。本文将详细介绍如何解决这些问题。

问题分析

1. 环境限制

微信小程序环境中缺少：

• URLSearchParams 对象
• FormData 对象
• 完整的 TextDecoder 支持（部分版本）

2. 编码问题

ArrayBuffer 到字符串的转换如果不正确处理编码，会导致中文乱码。

完整解决方案

/**
 * UniApp 微信小程序流式请求解决方案
 * @returns {Promise} 请求Promise对象
 */
export function streamRequest() {
   
   
  return new Promise((resolve, reject) => {
   
   
    // 请求参数配置
    const requestData = {
   
   
      session_id: '1755754367725_950',
      content: '什么是流式对话？',
      type: 1
    };

    // 手动构建 application/x-www-form-urlencoded 格式数据
    let formDataString = '';
    for (const key in requestData) {
   
   
      if (requestData.hasOwnProperty(key)) {
   
   
        formDataString += `${
     
     encodeURIComponent(key)}=${
     
     encodeURIComponent(requestData[key])}&`;
      }
    }
    formDataString = formDataString.slice(0, -1); // 移除末尾的&

    // 创建请求任务
    const requestTask = uni.request({
   
   
      url: 'https://xxx.com/api/v1/ai/xf/create',
      method: 'POST',
      header: {
   
   
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      data: formDataString,
      responseType: 'text',
      enableChunked: true, // 启用分块传输

      // 请求成功回调
      success: