axios / fetch 实现 stream 流式请求

这篇具有很好参考价值的文章主要介绍了axios / fetch 实现 stream 流式请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

axios 是一个支持node端和浏览器端的易用、简洁且高效的http库。本文主要介绍 axios 如何实现 stream 流式请求,注意这里需要区分 node 环境和浏览器环境。

axios / fetch 实现 stream 流式请求,大前端,Axios,HTTP,fetch

一、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);
  }
}

欢迎访问:天问博客文章来源地址https://www.toymoban.com/news/detail-657933.html

到了这里,关于axios / fetch 实现 stream 流式请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • axios 或 fetch 如何实现对发出的请求的终止?

    终止 HTTP 请求是一个重要的功能,特别是在需要优化性能、避免不必要的请求或在某些事件发生时(例如用户点击取消)中断正在进行的请求时。以下是如何使用 axios 和 fetch 实现请求终止的方法: 1. axios axios 使用了 CancelToken 来支持取消请求。 以下是使用 axios 取消请求的例

    2024年02月10日
    浏览(38)
  • 前端发送Fetch请求实现流式请求、模拟打字机效果等

    前端需要接收后端的流式返回数据,并实时渲染。 普通的xhr请求都是等http协议数据包一次性返回之后才渲染,类似于ChatGPT的Http接口内容类型为text/event-stream。这种内容类型需要与浏览器建立持久连接并持续监听服务器返回的数据。 npm 方式安装类库 使用 调用 fetchEventSource

    2024年02月13日
    浏览(44)
  • 使用 Axios 实现前端网络请求

    在现代的 Web 开发中,网络请求是不可或缺的一部分。前端开发者需要与后端服务器通信以获取数据、发送表单、或者执行其他操作。在过去,开发者通常使用 XMLHttpRequest (XHR) 对象来处理这些请求,但现在有了更加现代化和简洁的解决方案,其中一种就是 Axios。 Axios 是一个基

    2024年03月23日
    浏览(44)
  • 鸿蒙ArkTS实现http,axios网络请求

    实现http请求,在ArkTS中我们可以直接使用http如下代码 实现axios我们需要使用一个第三方工具 下载ohpm工具包,点击链接获取。 2. 解压文件,进入“ohpm/bin”目录,打开命令行工具,执行如下指令初始化ohpm Windows环境下执行: init.bat  如果init.bat不可以使用./init.bat 3. 将ohpm配置

    2024年04月12日
    浏览(50)
  • 【学一点儿前端】ajax、axios和fetch的概念、区别和易混淆点

    ajax是js异步技术的术语,早期相关的api是xhr,它是一个术语。 fetch是es6新增的用于网络请求标准api,它是一个api。 axios是用于网络请求的第三方库,它是一个库。 它的全称是:Asynchronous JavaScript And XML,翻译过来就是“异步的 Javascript 和 XML”。 很多小伙伴可能会误以为 Ajax

    2024年02月07日
    浏览(50)
  • ChatGPT 前端流式数据如何处理?本文提供三种方案为你揭开疑惑【websocket、SSE、fetch Stream]

    当下chatGPT如此火热,很多开发者都想部署一个 自己的gpt站点,本文不细致讨论gpt部署,只是着重总结一下博主在接入gpt时对于内容流失输出的解决方案,【代码质量并不高,感兴趣的小伙伴可以简单参考】 各个平台兼容性也比较友好,且支持小程序【小程序需要使用其内部自

    2024年02月04日
    浏览(49)
  • 前端流式(stream)请求,获取持续响应的方式

    在网络请求中,流(stream)表示持续接收数据的过程。使用流,可以逐步获取服务器响应,而不是等待整个响应完成后一次性获取。 Axios 通过监听响应对象的 data 事件,可以实现流式请求,主要的写法有直接 pipe 流和手动监听事件两种。使用流可以实现大文件或数据的流传输,

    2024年03月25日
    浏览(66)
  • javascript常见100问|前端基础知识|问ajax-fetch-axios-区别请用 XMLHttpRequestfetch 实现 ajax节流和防抖px em rem vw/箭头函数的缺点

    HTML CSS JS HTTP 等基础知识是前端面试的第一步,基础知识不过关将直接被拒。本章将通过多个面试题,讲解前端常考的基础知识面试题,同时复习一些重要的知识点。 扎实的前端基础知识,是作为前端工程师的根本。基础知识能保证最基本的使用,即招聘进来能干活,能产出

    2024年04月27日
    浏览(51)
  • 图文并茂教你模拟302接口,实现js中axios,fetch遇到302状态码后跳转的多种方案axios,fetch成功响应拦截302

    日常工作中,我们会使用fetch,或者axios发起请求来获取数据,但是当我们遇到一些特殊需求的时候,使用不同库之后,会得到不同的结果,例如302,308的状态码,那么我们应该怎么处理这两种情况呢? 如何使用多种方案实现前端代码+302后端接口实现页面跳转? fetch 发送GET 或者

    2024年02月20日
    浏览(46)
  • 【React】github搜索案例实现兄弟组件通信(axios、PubSub、fetch)

    😎😎欢迎来到我的博客😎😎 📔博主是一名大学在读本科生,主要学习方向是前端😊。 🍭目前已经更新了 【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏🤩 🛠目前正在学习的是🔥 R e a c t 框 架 React框架 R e

    2024年01月21日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包