Question

我试图在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);
  });
});

Stream api参考是：-

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

但是看起来react-native的访存实现与浏览器几乎没有什么不同，并且以与Web上相同的方式使用Stream并不容易。

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

在网络上，我们可以从 response.body.getReader（）访问Stream，其中响应只是从流URL的提取调用重新调整的正常结果，但是在react-native中，我们无法访问主体，并因此从提取调用的响应中获取getReader。

因此，为了解决这个问题，我尝试使用rn-fetch-blob npm package，因为它支持Streams，但是似乎只支持区域设置文件路径，因为那里的readStream函数似乎不支持传递Authorization和其他必要的支持。标头，因此我尝试将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);
      });

在我的两种方法中我可能都做错了，因此很少有指导可能对我或将来的其他人有所帮助。或者，我可能需要找到一种方法来编写桥以实现本地化。

在本机应用程序中通过获取流式API

0 个答案: