1

我试图在 react-native 应用程序中使用 Stream api 和 fetch，我在jeakearchibald.com上提到的一个很好的例子的帮助下实现了。代码类似于：-

fetch('https://html.spec.whatwg.org/').then(function(response) {
  console.log('response::-', response)
  var reader = response.body.getReader();
  var bytesReceived = 0;

  reader.read().then(function processResult(result) {
    if (result.done) {
      console.log("Fetch complete");
      return;
    }
    bytesReceived += result.value.length;
    console.log(`Received ${bytesReceived} bytes of data so far`);

    return reader.read().then(processResult);
  });
});

流 api 参考是：-

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

但是，react-native 的 fetch 实现似乎与浏览器略有不同，并且以与在 web 上使用相同的方式使用 Stream 并不容易。

相同的https://github.com/facebook/react-native/issues/12912在 react-native 上已经存在一个未解决的问题

在网络上，我们可以从response.body.getReader()访问 Stream ，其中 response 只是从流 url 的 fetch 调用重新调整的正常结果，但是在 react-native 中，我们无法访问 body ，因此无法从 fetch 调用的响应中访问 getReader .

因此，为了克服这个问题，我尝试使用rn-fetch-blob npm 包，因为它支持 Streams，但这似乎只支持语言环境文件路径，因为 readStream 函数似乎不支持传递授权和其他必要的标头，所以我尝试将 RNFetchBlob.fetch 与远程 url 和必要的标头一起使用，然后使用响应中的 readStream 方法，但这总是返回我没有带有当前响应的流。

RNFetchBlob.fetch('GET', 'https://html.spec.whatwg.org/')
      .progress((received, total) => {
        console.log('progress', received / total);
      })
      .then((resp) => {
        // const path = resp.path();
        console.log('resp success:-', resp);
        RNFetchBlob.fs.readStream(path, 'utf8').then((stream) => {
          let data = '';
          stream.open();
          stream.onData((chunk) => {
            data += chunk;
          });
          stream.onEnd(() => {
            console.log('readStream::-', data);
          });
        // });
      })
      .catch((err) => {
        console.log('trackAppointmentStatus::-', err);
      });

我可能在我的两种方法中都做错了，所以很少有指导可能会帮助我或将来的其他人。或者我可能需要找到一种方法来通过编写桥梁来本地完成它。

4

0 回答 0