门户网站建设创新,系统和网站哪个简单一点,sem竞价推广公司,90设计网页版axios 是一个支持node端和浏览器端的易用、简洁且高效的http库。本文主要介绍 axios 如何实现 stream 流式请求#xff0c;注意这里需要区分 node 环境和浏览器环境。 一、node端
代码演示#xff1a;
const axios require(axios);axios({method: get,url: http://tiven.c…axios 是一个支持node端和浏览器端的易用、简洁且高效的http库。本文主要介绍 axios 如何实现 stream 流式请求注意这里需要区分 node 环境和浏览器环境。 一、node端
代码演示
const axios require(axios);axios({method: get,url: http://tiven.cn/static/img/axios-stream-01-kcUzNdZO.jpg,responseType: stream
})
.then(response {response.data.on(data, (chunk) {// 处理流数据的逻辑});response.data.on(end, () {// 数据接收完成的逻辑});}); 二、浏览器端
在浏览器端axios 是使用 XMLHttpRequest 对象来实现请求设置 responseType: stream 后会出现以下警告⚠️ The provided value stream is not a valid enum value of type XMLHttpRequestResponseType. 所以在浏览器端我们需要使用浏览器内置API fetch 来实现 stream 流式请求。
代码演示
async function getStream() {try {let response await fetch(/api/admin/common/testStream);console.log(response);if (!response.ok) {throw new Error(Network response was not ok);}const reader response.body.getReader();const textDecoder new TextDecoder();let result true;let output while (result) {const { done, value } await reader.read();if (done) {console.log(Stream ended);result false;break;}const chunkText textDecoder.decode(value);output chunkText;console.log(Received chunk:, chunkText);}} catch (e) {console.log(e);}
}欢迎访问天问博客
