时间戳

首页 > 解决方案 > 在请求结束前使用 fetch 获取 HTTP 结果

javascript - 在请求结束前使用 fetch 获取 HTTP 结果

问题描述

我正在尝试使用/api/streamDrone 1.0 服务器的端点。此端点保持 HTTP 连接打开，并仅流式传输新的即将发生的事件以通知消费者事件。

我尝试使用 javascript Fetch API 处理那段代码

 await fetch("https://drone.company.com/api/stream/", {
    headers
  })
    .then(function(response) {
      return response.text();
    })
    .then(function(data) {
      console.log(data);
    });

此代码运行良好，但then始终在请求结束后调用回调。

有没有办法可以在请求处理时获取接收到的主体流？

标签： javascriptaxiosfetch

解决方案

你可以阅读response.getReader()喜欢

let response = await fetch("https://drone.company.com/api/stream/", {
    headers
  });

const reader = response.body.getReader();

while(true) {
  const {done, value} = await reader.read();

  if (done) {
    break;
  }
  const text = new TextDecoder("utf-8").decode(value);
  console.log(`Received ${text}`)
}

我们需要使用TextDecoder，因为value包含 Uint8Array 数据而不是文本。IE不支持。fetch 顺便说一句，也不支持。

基于https://javascript.info/fetch-progress

推荐阅读