uniapp实现流式返回ai问答的响应结果

1. 给uniapp添加一下 包管理功能 npm init //一路回车确认即可

2. 复制下面代码到 package.json 文件

	"dependencies": {
		"@microsoft/fetch-event-source": "^2.0.1",
		"babel-runtime": "^6.26.0",
		"vue-markdown": "^2.2.4"
	}

3. 安装依赖 npm i

4. 下载uni插件

下载地址1: 官方

下载地址2: 备份

5. 在页面中使用即可

使用方法

Attributes

Events

callback type

示例

<xe-event-source ref="EventSourceRef" :url="eventSourceUrl" :options="eventSourceOptions"
            @callback="handleCallback"></xe-event-source>

data() {
  return {
    inputContent: "What is the weather like today?",
    outputContent: ""
  }
},
computed: {
  // 接口地址
  eventSourceUrl() {
    return "";
  },
  // 请求配置
  eventSourceOptions({ inputContent }) {
    return {
      headers: {
        Authorization: "Bearer xxxxxxxxxxxxxxxx"
      },
      method: "POST",
      body: JSON.stringify({
        msg: inputContent
      })
    }
  }
},
methods: {
  // 发送请求
  handleClick() {
    if (!this.inputContent) return;
    this.outputContent = "";
    this.$refs.EventSourceRef.send();
  },
  // 接收数据
  handleCallback(e) {
    const { type, msg, data } = e || {};
    console.log(type, msg, (data || ""));
    if (type !== "onmessage") return;
    // TODO...
  }
}
...