首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

fetch返回ReadableStream作为错误的主体。如何获取该流的内容?

要获取fetch返回的ReadableStream的内容,可以使用以下步骤:

  1. 使用fetch函数发送请求并获取响应,确保响应的Content-Type头部字段指定为"application/octet-stream"或其他适当的流类型。
  2. 检查响应的ok属性,确保请求成功返回。
  3. 使用响应的body属性获取ReadableStream对象。
  4. 使用ReadableStream的getReader方法创建一个阅读器(reader)。
  5. 使用阅读器的read方法读取流的内容,该方法返回一个Promise对象。
  6. 使用Promise的then方法处理读取的结果,读取的结果是一个包含value和done属性的对象。
  7. 如果done属性为false,表示还有更多的数据需要读取,可以继续调用read方法读取下一部分数据。
  8. 如果done属性为true,表示已经读取完所有数据,可以关闭阅读器。

以下是一个示例代码:

代码语言:txt
复制
fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error('请求失败');
    }
    return response.body;
  })
  .then(body => {
    const reader = body.getReader();
    function read() {
      return reader.read().then(({ value, done }) => {
        if (done) {
          reader.releaseLock();
          return;
        }
        // 处理读取到的数据
        console.log(value);
        return read();
      });
    }
    return read();
  })
  .catch(error => {
    console.error(error);
  });

在这个示例中,我们首先检查响应的ok属性,然后获取响应的body属性作为ReadableStream对象。接下来,我们使用getReader方法创建一个阅读器,并使用read方法读取流的内容。读取的结果是一个包含value和done属性的对象,我们可以根据done属性判断是否还有更多的数据需要读取。如果还有数据,我们可以继续调用read方法读取下一部分数据。如果已经读取完所有数据,我们可以关闭阅读器。

请注意,这只是一个示例代码,实际应用中可能需要根据具体情况进行适当的错误处理和数据处理。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Java HTTP请求 如何获取并解析返回HTML内容

Java HTTP请求 如何获取并解析返回HTML内容在Java开发中,经常会遇到需要获取网页内容情况。而HTTP请求是实现这一目标的常用方法之一。...本文将介绍如何使用Java进行HTTP请求,并解析返回HTML内容。...JavaHTTP请求 如何获取并解析返回HTML内容首先,我们需要导入相关Java类库:java.net包中HttpURLConnection类和java.io包中InputStreamReader...这一步可以根据具体需求而定,常见处理方式包括使用正则表达式、使用第三方库(如Jsoup)进行解析等。综上所述,我们可以通过以上步骤来实现Java中获取并解析返回HTML内容功能。...总结来说,本文介绍了如何使用Java进行HTTP请求,以及如何获取并解析返回HTML内容。掌握这些基本HTTP请求和HTML内容处理技巧,对于开发Java网络应用程序是非常有帮助

83440
  • 精读《web streams》

    Node stream 比较难理解,也比较难用,但 “” 是个很重要而且会越来越常见概念(fetch 返回值就是),所以我们有必要认真学习 stream。...所以我们要构造一个 readable streams(未来可能越来越多函数返回值就是,也就是在环境下工作,就不用考虑如何构造流了)。...上面只是 mock 例子,实际场景中,读取流往往是一些调用函数返回对象,最常见就是 fetch 函数: async function fetchStream() { const response...= await fetch('https://example.com') const stream = response.body; } 可见,fetch 函数返回 response.body...fetch 天然也是一个,速度时 z M/s,我们最终看到视频速度就是 min(x, y, z),当然如果服务器提前将 readableStream 提供好,那么 x 速度就可以忽略,此时看到视频速度是

    90020

    Fetch还是Axios——哪个更适合HTTP请求?

    正如我之前提到,Promise 会返回 Response 对象,正因为如此,我们需要使用另一个方法来获取响应主体。...当我们创建配置对象时,我们可以定义一堆属性,最常见是: baseUrl params headers auth responseType 作为响应,axios 返回一个 promise, promise...在 axios 中,它是自动完成,所以我们只需在请求中传递数据或从响应中获取数据。它是自动字符串化,所以不需要其他操作。 让我们看看如何fetch() 和 axios 获取数据。...如果出现像 404 这样错误响应,promise 就会被拒绝并返回一个错误,所以我们需要捕获一个错误,我们可以检查它是什么类型错误,就是这样。让我们看看代码示例。...为了在 .fetch() 中跟踪下载进度,我们可以使用其中一个 response.body 属性,一个 ReadableStream 对象。它逐块提供主体数据,并允许我们计算时间消耗了多少数据。

    4.9K20

    万字长文带你学习【前端开发中二进制数据】| 技术创作特训营第五期

    ReadableStream(可读): `ReadableStream` 表示一种可读取数据。它允许开发者从各种数据源(例如网络请求、文件、Blob 对象等)读取数据。...常见从网页中创建方式:浏览器中直接内置了许多有用视频。您可以轻松地从 blob 创建 ReadableStream。...Blob 接口 stream() 方法会返回一个 ReadableStream,在读取时,方法会返回 blob 中包含数据。...FileSystemWritableFileStream 和实验性 fetch() 请求就是可写示例。...将 Blob 对象作为参数传入,然后以指定格式返回。FileReader.readAsText():返回文本,需要指定文本编码,默认为 UTF-8。

    57031

    解析Node.js 中 Stream()

    实际案例 如何创建可读 引入模块并初始化: const Stream = require('stream') const readableStream = new Stream.Readable()...当前最佳实践是始终将异步函数内容封装在 try/catch 块中并处理错误,但这很容易出错。这个 pull request就是为了解决这个问题,如果能加入到 Node 核心代码的话。...当没有要读取内容时,它返回 null。因此,在while循环中,我们检查null并终止循环。请注意,readable事件是在可以从中读取数据块时发出。...finished(writable); pipeline() 管道是一种机制,是将一个输出作为另一输入。...它通常用于从一个获取数据并将该输出传递到另外。管道操作没有限制,换句话说,管道用于分步骤处理数据。 Node 10.x 引入了stream.pipeline()。

    2.6K30

    如何在前端下载后端返回文件时,获取请求头中文件名称?

    前言在前后端分离开发模式下,前端需要从后端获取文件,以便进行文件下载。同时,前端还需要获取请求头中文件名称,以便为用户提供更加友好下载体验。...本文将介绍如何在前端下载后端返回文件时,获取请求头中文件名称。2. 获取文件前端可以通过发送请求方式获取后端返回文件。...获取请求头中文件名称后端返回文件时,通常会在响应头中设置 Content-Disposition 实体头字段,用于指定文件名称、类型等信息。...总结本文介绍了如何在前端下载后端返回文件时,获取请求头中文件名称。...通过获取响应头中 Content-Disposition 实体头字段,再利用正则表达式匹配出 filename 子参数值,即可轻松获取文件名称。

    7.6K01

    StreamSaver.js入门教程:优雅解决前端下载文件难题

    使用 fetch 方法访问文件url,将内容一点点放到 StreamSaver 创建文件里。 监听文件内容是否读取完整,读取完就执行“保存并关闭文件”操作。 根据上面的指引编写代码: <!...,这个名字可以自定义 // 【步骤2】使用 fetch 方法访问文件url,将内容一点点放到 StreamSaver 创建文件里 fetch('http://localhost...我准备了两个 .csv 文件(test1.csv 和 test2.csv),它们内容分别长这个样子。 我要将它们合并成这样子: 在合并文件之前我们首先要清楚这个文件内容如何组成。...递归执行迭代器,如果迭代器里还有内容,就使用 fetch 请求数据。 如果迭代器没内容了,使用 writer.close() 关闭文件写入。...) .then(res => { // 通过请求文件url获取数据 const readableStream = res.body if

    1.7K30

    彻底掌握 Node.js 四大,解决爆缓冲区“背压”问题

    把一个东西从 A 搬到 B 怎么搬呢? 抬起来,移动到目的地,放下不就行了么。 那如果这个东西有一吨重呢? 那就一部分一部分搬。...本文会回答以下问题: Node.js 4 种 stream 是什么 生成器如何与 Readable Stream 结合 stream 暂停和流动 什么是背压问题,如何解决 Node.js 4种..._read 和 _write 方法来接受和返回内容 Transform 需要实现 _transform 方法来把接受内容转换之后返回 我们分别来看一下: Readable Readable 要实现...('done~'); }); 这就是可读,通过实现 _read 方法来返回内容。...('finish', data => console.log('write done~')); 跑了一下,效果如下: 暂停和流动 我们从 Readable 获取内容,然后流入 Writable

    57520

    W3C TPAC 大会上 Service workers 内容总结

    这意味着页面可以是: 冻结 - 该页面可以通过可见选项卡(作为顶层页面或其中 iframe)访问,选项卡当前未选中。事件循环已暂停,因此该页面未使用 CPU。...*', 7 }), 8}); 把作为请求体 多年来,你可以流式传输响应: 1const response = await fetch('/whatever'); 2const reader = response.body.getReader...但是,在 TPAC 大会中,浏览器开发人员注意到,鉴于当前网络栈,在获取过程中公开这个内容确实很复杂,因此请求最初实现在请求完成之前不会产生响应。...由于用户已经作为顶级页面访问了网站(例如原始位置在URL栏中,而不是 iframe),因此 Chrome 很高兴在以后允许一个小,保守执行窗口。...Mozilla 和 Apple 员工对后台获取(https://developers.google.com/web/updates/2018/12/background-fetch)模型更加满意,模型在获取期间会持续显示通知

    84310

    前端文件下载(二)

    在上一篇文章 前端文件下载(一)中,我们介绍了如何进行「超链接文件」下载。 本文,我们将通过案例,讲解如何将文件内容转成 Blob 下载。 Blod 对象表示一个不可变、原始数据类文件对象。...它数据可以按文本或二进制格式进行读取,也可以转换成 ReadableStream 用来操作数据。 本文因为已经将文件转为 Blob 了,这里可以忽略跨域请求。我们直接在同源下进行案例演示。...running on http://localhost:3000'); }); 我们在路由 / 中渲染了模版文件,然后在路由 /download/file 中,将文件 test.txt.zip 转为可读返回...渲染模版内容如下: <!...总结 本文中,我们使用 Blob 和 createObjectURL,并集合了 fetch 进行文件下载。

    32120

    Node.js 源码解读之可读

    在 Node 中,我们使用传统 readFile 去读取文件的话,会将文件从头到尾都读到内存中,当所有内容都被读取完毕之后才会对加载到内存中文件内容进行统一处理。...(Transform Stream) 为了深入学习这部分内容,循序渐进理解 Node.js 中流概念,并且由于源码部分较为复杂,本人决定先从可读开始学习这部分内容。...,如果是objectMode则与buffer.length相等 pipes: [], // 保存监听了可读所有管道队列 flowing: null, // 可独状态 null、false...这种数据结构获取头部数据速度快于 Array.prototype.shift()。 2.2.1....state.resumeScheduled = false; stream.emit('resume'); flow(stream); } function flow(stream) { // 当处于模式方法会不断

    2.1K10

    基于HTTP流式传输长时响应体验提升

    ,在接收到前端请求后立即返回,过一段时间完成计算后再让前端请求一次,又会让界面上数据在这段等待时间中处于老不正确数据情况,因此,我们需要找到一种既可以避免异步发送数据让用户误认为结果错误,又可以避免长时响应让用户等待焦虑方法...res.write,在http模块中,res本身就是一个基于实现响应对象,res.write则是向中写入内容(相当于append)。...浏览器端实现流式接收 在大部分浏览器内部也实现了,我们可以通过Streams API了解当前浏览器已经提供各种接口。而在http请求场景中,全局fetch函数为我们提供了非常便捷接入方法。...,只是在传输和获取数据地方不同,随之渲染过程也不同。...,我们优先返回地图信息,然后再逐渐往外扩散 总之,流式传输特性决定了我们可以在较长时间里,持续地接收数据,实现界面的同步。

    3K20

    什么是Node.js Stream()?

    可读(Readable)可读是从源头读取数据一种。源头可以是文件、网络连接或其他数据源。可读提供了一种逐步获取数据机制,可以根据实际需求分批次读取数据。...读取数据要读取可读数据,可以通过监听data事件来实现。当有新数据块可用时,data事件将被触发,并传递数据块作为参数。...每当可读接收到新数据块时,我们打印出数据块内容。...以下是一个示例,展示了如何监听可读end事件:readableStream.on('end', () => { console.log('数据读取完毕');});上述示例中,当可读读取完全部数据后...;上述示例中,我们监听可读写data事件,当有新数据块可用时,打印出数据块内容。然后,我们通过write方法向可读写写入一段数据。

    30230

    告别等待!HTTP分块Chunk传输让客户端响应更迅速数据即时呈现

    每个传输块都包含大小信息和实际数据内容。让服务器发送大型文件或数据时不必一开始就发送全部内容,而是可以分成一块一块数据来发送。这样可以节省带宽和内存,特别是对于需要长时间连接情况。...响应主体被分成多个块,每个块前面都有一个十六进制数字标记其大小,紧跟着是十六进制换行符\r\n。最后一个块大小为0,表示数据已经结束,随后\r\n是HTTP响应最后空行。...在HTTP分块传输中,每个块使用十六进制数表示大小信息开头,并以'\r\n'换行符结束。大小信息表示块包含字节数。块实际数据由大小信息所指定数量字节组成,并以'\r\n'结束。...HTTP分块传输不仅适用于响应内容传输,还可以用于请求数据发送,在渗透过程中,当我们遇到网站存在waf情况,我们就可以利用HTTP分块传输来绕过waf检测。...chunk-data表示当前块数据内容。所有块数据内容累加起来就是完整实体正文。 最后一个长度为0块表示传输结束。

    3.8K10
    领券