首页
学习
活动
专区
工具
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网络应用程序是非常有帮助的。

1K40
  • 精读《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 的速度就可以忽略,此时看到视频的速度是

    91820

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

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

    5.1K20

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

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

    63531

    解析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.7K30

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

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

    8.3K01

    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

    2.1K30

    彻底掌握 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

    59520

    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)模型更加满意,该模型在获取期间会持续显示通知

    84910

    前端文件下载(二)

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

    33320

    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.2K10

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

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

    3.8K20

    Node.js Streams在数据处理和传输中的应用

    一、引言在现代的数据驱动型应用中,高效的数据处理和传输是至关重要的。Node.js作为一种流行的服务器端JavaScript运行环境,提供了一种强大的机制来处理数据的流动,即Streams。...它继承自双向流,例如在读取一个文件内容并将其转换为另一种格式(如JSON转换为XML)时就可以使用转换流。...例如,在读取一个大型的日志文件时:const fs = require('fs');const readableStream = fs.createReadStream('large.log');readableStream.on...五、错误处理与流的高级用法(一)错误处理在流的操作过程中,可能会出现各种错误,如文件读取失败、网络连接中断等。对于每个流,都可以监听error事件来处理错误。...例如,在前面提到的可读流和可写流的操作中,我们已经看到了如何监听error事件并进行相应的处理。在复杂的管道操作中,错误的传播也需要考虑到,以确保整个数据处理流程的健壮性。

    4600

    什么是Node.js Stream(流)?

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

    32530
    领券