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

时间:2019-06-27 22:33:29

标签: javascript axios fetch

我正在尝试使用Drone 1.0服务器的/api/stream端点。该端点使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回调。

有没有办法让我在请求处理过程中获取接收到的正文流?

1 个答案:

答案 0 :(得分:2)

您可以像这样从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的Is not supportedfetch is not supported再说一次。

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