# UniappStreamRequest

**Repository Path**: scenario-samples/uniapp-stream-request

## Basic Information

- **Project Name**: UniappStreamRequest
- **Description**: 本示例主要基于requestInStream和on("dataReceive")方法实现流式请求的功能。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-19
- **Last Updated**: 2025-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## uni-app实现流式请求示例

## 场景介绍
本示例主要基于[requestInStream](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-http#requestinstream10)和[on("dataReceive")](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-http#ondatareceive10)方法实现流式请求的功能。
## 效果预览
<img src="screenshots/output.gif" width="200">


## 实现思路
1. 新建uts插件，分别封装[requestInStream](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-http#requestinstream10)和[on("dataReceive")](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-http#ondatareceive10)方法为“发起post网络请求”与“订阅流式响应数据接收事件”，供页面调用。
```uts
import { http } from '@kit.NetworkKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { util } from '@kit.ArkTS';
 
export type HttpRequest = {
  url : string, // 必传
  data : object, // 请求body
  complete : () => void;
  fail : () => void;
};
 
export class HttpUtil {
  httpRequest ?: http.HttpRequest = undefined;
 
  constructor() {
 
  }
 
  post(req : HttpRequest) {
    if (!this.httpRequest) {
      this.httpRequest = http.createHttp();
    }
 
    let options : http.HttpRequestOptions = {
      method: http.RequestMethod.POST, // 可选，默认为GET。
      extraData: req.data,
    };
    this.httpRequest.requestInStream(req.url, options, (err : BusinessError<void>, data : number) => {
      if (!err) {
        console.info(`requestInStream OK! ResponseCode is ${JSON.stringify(data)}`);
      } else {
        req.fail();
        console.error(`requestInStream ERROR : err = ${JSON.stringify(err)}`);
      }
    });
 
    this.httpRequest.on('dataEnd', () => {
      console.info('Receive dataEnd !');
      if (this.httpRequest) {
        this.httpRequest.off('dataEnd');
        this.httpRequest.off('dataReceive');
        this.httpRequest.destroy();
      }
      req.complete();
    });
  }
 
  onResponse(callback : (data : string) => void) {
    if (!this.httpRequest) {
      this.httpRequest = http.createHttp();
    }
    this.httpRequest.on('dataReceive', (data : ArrayBuffer) => {
      console.info('dataReceive length start!');
      console.info(`dataReceive length: ${JSON.stringify(data.byteLength)}`);
      let decoder = util.TextDecoder.create('utf-8');
      let str = decoder.decodeToString(new Uint8Array(data));
      callback(str);
    });
  }
}
```


2. 在vue页面中，先订阅流式响应数据接收事件，然后发起post网络请求。
```Vue
<template>
  <view>
    <button style="width: 100%;height: 50px;" @click="httpRequstOpt">点击发起流式请求</button>
    <textarea>{{chatMessages}}</textarea>
  </view>
</template>
 
<script setup>
  import {
    HttpUtil,
    HttpRequest
  }
  from '@/uni_modules/harmony-net'
  import {
    ref
  } from 'vue';
 
  const chatMessages = ref('');
 
  const httpRequstOpt = () => {
    let httputil = new HttpUtil();
 
    httputil.onResponse((res) => {
      console.info(res);
      chatMessages.value += res;
    })
 
    httputil.post({
      url: "http://ip:11434/v1/chat/completions", // 必传
      data: {
        "stream": true,
        "temperature": 0.2,
        "max_tokens": 300,
        "model": "Qwen3:4b",
        "top_p": 0.6,
        "messages": [{
          "role": "user",
          "content": "帮忙给哪吒写一首诗"
        }]
      },
      // 请求异常，可传
      fail: (res) => {
        console.error("failfailfailfailfailfailfail", res)
      },
      // 请求完成，可传
      complete: (res) => {
        console.info("completecompletecompletecomplete", res)
      }
    });
  }
</script>
 
<style>
</style>
```

3. 数据接收参考下图。通过请求服务器，接收到的多条流式响应数据。<br>
<img src="screenshots/img.png" width="200">


## 说明
服务端搭建：可以在本地部署一个大语言模型，用于验证流式请求效果。搭建步骤如下。
1. 首先安装ollama，可以从[官网下载地址](https://ollama.com/download/windows)获取。ollama是一个开源工具，用于简化和加速模型训练和部署。
2. 本示例使用模型qwen3:4b，只要在命令行工具中运行：`ollama run qwen3:4b`，即可下载并运行大语言模型。
3. ollama的问答服务接口为：`http://ip:11434/v1/chat/completions`
4. 接口的请求体为json格式，内容参考：`{"stream":true,"model":"Qwen3:4b","messages":[{"role":"user","content":"请为哪吒写一首诗"}]}`


## 约束与限制
* 本示例支持API Version 20 Release及以上版本。
* 本示例支持HarmonyOS 6.0.0 Release SDK及以上版本。
* 本示例需要使用DevEco Studio 6.0.0 Release及以上版本进行编译运行。

## 工程目录

```
├─App.vue                                   // 应用配置，用来配置App全局样式以及监听、应用生命周期
├─index.html                                // 用于web加载渲染的root节点
├─main.js                                   // Vue初始化入口文件
├─manifest.json                             // 应用相关配置
├─pages.json                                // 配置页面路由、导航条、选项卡等页面类信息
├─uni.scss                                  // 内置的常用样式变量
├─harmony-configs                           // harmony工程定制化配置目录，每次编译执行HBuilderX都会检查这个目录，如果目录不存在则会自动创建。
│  └─entry
│      └─src
│          └─main
│              └─module.json5               // 应用配置文件，配置requestPermissions等信息
│              └─resources                  // 资源文件目录，会自动覆盖掉编译uni-app生成harmony工程中的同名文件
├─pages
│  └─index
│      └─index.vue                          // 首页
│          
├─static                                    // 静态资源文件
└─uni_modules                               // 插件目录，用于存放uni-app的插件
```


## 参考文档
[http请求requestInStream接口如何使用](https://developer.huawei.com/consumer/cn/doc/architecture-guides/office-v1_2-ts_22-0000002359681920#section9526101103112)
[调用ArkTS API](https://uniapp.dcloud.net.cn/tutorial/harmony/native-api.html)