axios 发起steam请求
<template>
<div>
{{ content }}
</div>
<div>
<ElButton @click="handleClick">
点我
</ElButton>
</div>
</template>
<script setup>
import axios from 'axios';
import { ElButton } from 'element-plus';
import { Stream } from '@/utils/Stream';
import { ref } from "vue";
const content = ref('')
async function fetchSSE() {
axios({
method: 'post',
url: 'https://dashscope.aliyuncs.com/api/v1/apps/***/completion', // 替换为 DashScope SSE URL
headers: {
'Authorization': 'Bearer sk-***',
'Accept': 'text/event-stream',
'X-DashScope-SSE': 'enable'
},
data: {
"input": {
"prompt": "你是谁？"
},
"parameters": {
"incremental_output": true
},
"debug": {}
},
responseType: 'stream', // 关键点：Axios 需要设置 responseType 为 stream
adapter: 'fetch', // 关键点 fetch 替换 XHR，1.7.0以上版本
}).then(async (response) => {
// const stream = response.data;
// // const reader = stream.pipeThrough(new TextDecoderStream()).getReader();
// const reader = stream.pipeThrough(new TextDecoderStream()).getReader();
// while (true) {
// const { value, done } = await reader.read();
// if (done) break;
// console.log(value)
// console.log(parseSSE(value));
// }
// 采用自定义的 Stream
const stream = Stream.fromReadableStream(response.data, new AbortController());
for await (const data of stream) {
content.value += data.output.text
console.log(data.output.text);
}
})
}
const handleClick = () => {
fetchSSE()
}
</script>
本文是基于vue开发的，看官可以直接看上面 fetchSSE 的定义即可
关键配置
adapter: 'fetch', // 关键点 fetch 替换 XHR，1.7.0以上版本
上面的 axios 基本上配置了 adapter = fetch 就可以了，返回就是stream数据
对于 stream 数据的处理，两种方案
方案一：简单处理
const stream = response.data;
const reader = stream.pipeThrough(new TextDecoderStream()).getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
console.log(value)
console.log(parseSSE(value));
}
使用 stream.pipeThrough(new TextDecoderStream()).getReader() 进行转码即可
方案二：从openai 抠出
直接上 @/utils/Stream 文件的代码
import { LineDecoder } from "./line.mjs";
function ReadableStreamToAsyncIterable(stream) {
if (stream[Symbol.asyncIterator])
return stream;
const reader = stream.getReader();
return {
async next() {
try {
const result = await reader.read();
if (result?.done)
reader.releaseLock(); // release lock when stream becomes closed
return result;
}
catch (e) {
reader.releaseLock(); // release lock when stream becomes errored
throw e;
}
},
async return() {
const cancelPromise = reader.cancel();
reader.releaseLock();
await cancelPromise;
return { done: true, value: undefined };
},
[Symbol.asyncIterator]() {
return this;
},
};
}
async function* _iterSSEMessages(response, controller) {
if (!response.body) {
controller.abort();
throw new OpenAIError(`Attempted to iterate over a response with no body`);
}
const sseDecoder = new SSEDecoder();
const lineDecoder = new LineDecoder();
const iter = ReadableStreamToAsyncIterable(response.body);
for await (const sseChunk of iterSSEChunks(iter)) {
for (const line of lineDecoder.decode(sseChunk)) {
const sse = sseDecoder.decode(line);
if (sse)
yield sse;
}
}
for (const line of lineDecoder.flush()) {
const sse = sseDecoder.decode(line);
if (sse)
yield sse;
}
}
export class Stream {
constructor(iterator, controller) {
this.iterator = iterator;
this.controller = controller;
}
static fromSSEResponse(response, controller) {
let consumed = false;
async function* iterator() {
if (consumed) {
throw new Error('Cannot iterate over a consumed stream, use `.tee()` to split the stream.');
}
consumed = true;
let done = false;
try {
for await (const sse of _iterSSEMessages(response, controller)) {
if (done)
continue;
if (sse.data.startsWith('[DONE]')) {
done = true;
continue;
}
if (sse.event === null) {
let data;
try {
data = JSON.parse(sse.data);
}
catch (e) {
console.error(`Could not parse message into JSON:`, sse.data);
console.error(`From chunk:`, sse.raw);
throw e;
}
if (data && data.error) {
throw new APIError(undefined, data.error, undefined, undefined);
}
yield data;
}
else {
let data;
try {
data = JSON.parse(sse.data);
}
catch (e) {
console.error(`Could not parse message into JSON:`, sse.data);
console.error(`From chunk:`, sse.raw);
throw e;
}
// TODO: Is this where the error should be thrown?
if (sse.event == 'error') {
throw new APIError(undefined, data.error, data.message, undefined);
}
yield { event: sse.event, data: data };
}
}
done = true;
}
catch (e) {
// If the user calls `stream.controller.abort()`, we should exit without throwing.
if (e instanceof Error && e.name === 'AbortError')
return;
throw e;
}
finally {
// If the user `break`s, abort the ongoing request.
if (!done)
controller.abort();
}
}
return new Stream(iterator, controller);
}
/**
* Generates a Stream from a newline-separated ReadableStream
* where each item is a JSON value.
*/
static fromReadableStream(readableStream, controller) {
let consumed = false;
async function* iterLines() {
const lineDecoder = new LineDecoder();
const iter = ReadableStreamToAsyncIterable(readableStream);
for await (const chunk of iter) {
for (const line of lineDecoder.decode(chunk)) {
yield line;
}
}
for (const line of lineDecoder.flush()) {
yield line;
}
}
async function* iterator() {
if (consumed) {
throw new Error('Cannot iterate over a consumed stream, use `.tee()` to split the stream.');
}
consumed = true;
let done = false;
try {
for await (const line of iterLines()) {
if (done)
continue;
// if (line && line != 'id:1' && line != 'event:result' && line != ':HTTP_STATUS/200') {
if (line.indexOf('data:') == 0) {
// console.log(line);
yield JSON.parse(line.replace('data:', ''));
}
}
done = true;
}
catch (e) {
// If the user calls `stream.controller.abort()`, we should exit without throwing.
if (e instanceof Error && e.name === 'AbortError')
return;
throw e;
}
finally {
// If the user `break`s, abort the ongoing request.
if (!done)
controller.abort();
}
}
return new Stream(iterator, controller);
}
[Symbol.asyncIterator]() {
return this.iterator();
}
/**
* Splits the stream into two streams which can be
* independently read from at different speeds.
*/
tee() {
const left = [];
const right = [];
const iterator = this.iterator();
const teeIterator = (queue) => {
return {
next: () => {
if (queue.length === 0) {
const result = iterator.next();
left.push(result);
right.push(result);
}
return queue.shift();
},
};
};
return [
new Stream(() => teeIterator(left), this.controller),
new Stream(() => teeIterator(right), this.controller),
];
}
/**
* Converts this stream to a newline-separated ReadableStream of
* JSON stringified values in the stream
* which can be turned back into a Stream with `Stream.fromReadableStream()`.
*/
toReadableStream() {
const self = this;
let iter;
const encoder = new TextEncoder();
return new ReadableStream({
async start() {
iter = self[Symbol.asyncIterator]();
},
async pull(ctrl) {
try {
const { value, done } = await iter.next();
if (done)
return ctrl.close();
const bytes = encoder.encode(JSON.stringify(value) + '\n');
ctrl.enqueue(bytes);
}
catch (err) {
ctrl.error(err);
}
},
async cancel() {
await iter.return?.();
},
});
}
}
function parseSSE(value) {
const lines = value.split('\n'); // 按行拆分
let jsonData = '';
for (const line of lines) {
if (line.startsWith('data:')) {
jsonData += line.replace(/^data:\s*/, ''); // 去掉 "data: " 前缀
}
}
try {
return JSON.parse(jsonData); // 解析 JSON
} catch (error) {
console.error('JSON 解析失败:', error);
return null;
}
}
line.mjs 内容如下：
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
if (kind === "m") throw new TypeError("Private method is not writable");
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _LineDecoder_carriageReturnIndex;
class OpenAIError{
constructor(){}
}
/**
* A re-implementation of httpx's `LineDecoder` in Python that handles incrementally
* reading lines from text.
*
* https://github.com/encode/httpx/blob/920333ea98118e9cf617f246905d7b202510941c/httpx/_decoders.py#L258
*/
export class LineDecoder {
constructor() {
_LineDecoder_carriageReturnIndex.set(this, void 0);
this.buffer = new Uint8Array();
__classPrivateFieldSet(this, _LineDecoder_carriageReturnIndex, null, "f");
}
decode(chunk) {
if (chunk == null) {
return [];
}
const binaryChunk = chunk instanceof ArrayBuffer ? new Uint8Array(chunk)
: typeof chunk === 'string' ? new TextEncoder().encode(chunk)
: chunk;
let newData = new Uint8Array(this.buffer.length + binaryChunk.length);
newData.set(this.buffer);
newData.set(binaryChunk, this.buffer.length);
this.buffer = newData;
const lines = [];
let patternIndex;
while ((patternIndex = findNewlineIndex(this.buffer, __classPrivateFieldGet(this, _LineDecoder_carriageReturnIndex, "f"))) != null) {
if (patternIndex.carriage && __classPrivateFieldGet(this, _LineDecoder_carriageReturnIndex, "f") == null) {
// skip until we either get a corresponding `\n`, a new `\r` or nothing
__classPrivateFieldSet(this, _LineDecoder_carriageReturnIndex, patternIndex.index, "f");
continue;
}
// we got double \r or \rtext\n
if (__classPrivateFieldGet(this, _LineDecoder_carriageReturnIndex, "f") != null &&
(patternIndex.index !== __classPrivateFieldGet(this, _LineDecoder_carriageReturnIndex, "f") + 1 || patternIndex.carriage)) {
lines.push(this.decodeText(this.buffer.slice(0, __classPrivateFieldGet(this, _LineDecoder_carriageReturnIndex, "f") - 1)));
this.buffer = this.buffer.slice(__classPrivateFieldGet(this, _LineDecoder_carriageReturnIndex, "f"));
__classPrivateFieldSet(this, _LineDecoder_carriageReturnIndex, null, "f");
continue;
}
const endIndex = __classPrivateFieldGet(this, _LineDecoder_carriageReturnIndex, "f") !== null ? patternIndex.preceding - 1 : patternIndex.preceding;
const line = this.decodeText(this.buffer.slice(0, endIndex));
lines.push(line);
this.buffer = this.buffer.slice(patternIndex.index);
__classPrivateFieldSet(this, _LineDecoder_carriageReturnIndex, null, "f");
}
return lines;
}
decodeText(bytes) {
if (bytes == null)
return '';
if (typeof bytes === 'string')
return bytes;
// Node:
if (typeof Buffer !== 'undefined') {
if (bytes instanceof Buffer) {
return bytes.toString();
}
if (bytes instanceof Uint8Array) {
return Buffer.from(bytes).toString();
}
throw new OpenAIError(`Unexpected: received non-Uint8Array (${bytes.constructor.name}) stream chunk in an environment with a global "Buffer" defined, which this library assumes to be Node. Please report this error.`);
}
// Browser
if (typeof TextDecoder !== 'undefined') {
if (bytes instanceof Uint8Array || bytes instanceof ArrayBuffer) {
this.textDecoder ?? (this.textDecoder = new TextDecoder('utf8'));
return this.textDecoder.decode(bytes);
}
throw new OpenAIError(`Unexpected: received non-Uint8Array/ArrayBuffer (${bytes.constructor.name}) in a web platform. Please report this error.`);
}
throw new OpenAIError(`Unexpected: neither Buffer nor TextDecoder are available as globals. Please report this error.`);
}
flush() {
if (!this.buffer.length) {
return [];
}
return this.decode('\n');
}
}
_LineDecoder_carriageReturnIndex = new WeakMap();
// prettier-ignore
LineDecoder.NEWLINE_CHARS = new Set(['\n', '\r']);
LineDecoder.NEWLINE_REGEXP = /\r\n|[\n\r]/g;
/**
* This function searches the buffer for the end patterns, (\r or \n)
* and returns an object with the index preceding the matched newline and the
* index after the newline char. `null` is returned if no new line is found.
*
* ```ts
* findNewLineIndex('abc\ndef') -> { preceding: 2, index: 3 }
* ```
*/
function findNewlineIndex(buffer, startIndex) {
const newline = 0x0a; // \n
const carriage = 0x0d; // \r
for (let i = startIndex ?? 0; i < buffer.length; i++) {
if (buffer[i] === newline) {
return { preceding: i, index: i + 1, carriage: false };
}
if (buffer[i] === carriage) {
return { preceding: i, index: i + 1, carriage: true };
}
}
return null;
}
export function findDoubleNewlineIndex(buffer) {
// This function searches the buffer for the end patterns (\r\r, \n\n, \r\n\r\n)
// and returns the index right after the first occurrence of any pattern,
// or -1 if none of the patterns are found.
const newline = 0x0a; // \n
const carriage = 0x0d; // \r
for (let i = 0; i < buffer.length - 1; i++) {
if (buffer[i] === newline && buffer[i + 1] === newline) {
// \n\n
return i + 2;
}
if (buffer[i] === carriage && buffer[i + 1] === carriage) {
// \r\r
return i + 2;
}
if (buffer[i] === carriage &&
buffer[i + 1] === newline &&
i + 3 < buffer.length &&
buffer[i + 2] === carriage &&
buffer[i + 3] === newline) {
// \r\n\r\n
return i + 4;
}
}
return -1;
}
//# sourceMappingURL=line.mjs.map
参考 openai 的话，上面还有优化的余地 =)
优化方案
export const getData = (params) => {
return axios({
method: "post",
url,
headers: {
Authorization: `Bearer ${apiKey}`,
"Content-Type": "application/json",
"X-DashScope-SSE": "enable",
},
data: {
...(params || {}),
},
responseType: "stream",
adapter: "fetch",
})
.then((response) => {
const stream = response.data;
const reader = stream.pipeThrough(new TextDecoderStream()).getReader();
async function* streamAsyncIterator(reader) {
try {
while (true) {
const { done, value } = await reader.read();
if (done) return;
yield value;
}
} finally {
reader.releaseLock();
}
}
return streamAsyncIterator(reader);
})
.catch((error) => {
console.error("Error with Axios stream:", error);
});
};
前端使用方式：
const aa = await getData({
input: {
prompt: "你是谁？",
},
parameters: {
'incremental_output': 'true' // 增量输出
},
debug: {},
stream: true,
})
for await (const value of aa) {
console.log(value);
}
扫一扫
8201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
