在react-native应用程序中使用fetch流API

0md85ypi  于 2023-10-22  发布在  React
关注(0)|答案(1)|浏览(177)

我试图在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上已经存在未解决的问题
在web上,我们可以从**response.body.getReader()**访问Stream,其中response只是从stream url的fetch调用返回的正常结果,但在react-native中,我们无法从fetch调用的响应中访问body和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);
      });

我可能在这两种方法上都做错了,所以很少有指导可以帮助我或其他人。或者我可能需要找到一种方法来做它的原生写一个桥梁。

m1m5dgzv

m1m5dgzv1#

如果你使用的是React Native,以前是不可能做到这一点的。
但是现在https://github.com/react-native-community/fetch可以进行流媒体传输。
这实际上是一个RN团队有一段时间从未解决的bug,这个repo的出现是为了提供一个更好的符合WHATWG规范的获取
这是GitHub的fetch polyfill的一个分支,React Native目前提供的fetch实现。这个项目的特点是在React Native的网络API而不是XMLHttpRequest之上直接构建了一个替代的获取实现,以提高性能。同时,它旨在填补WHATWG规范中的一些空白,即对文本流的支持。
下面是如何使用它:

安装

这些简洁的步骤是经过数小时的调试而得来的,我不想浪费您的时间。

$ npm install react-native-fetch-api --save

现在安装polyfills:

$ npm install react-native-polyfill-globals

将polyfill与fetch一起使用:
将以下代码添加到应用入口文件index.js的顶部,该文件位于项目的根目录下。现在,您的新Fetch可在全球范围内使用。

import { polyfill as polyfillFetch } from 'react-native-polyfill-globals/src/fetch';
polyfill();

现在您可以像正常的浏览器获取一样使用流对象。确保指定选项textStreaming true。

fetch('https://jsonplaceholder.typicode.com/todos/1', { reactNative: { textStreaming: true } })
  .then(response => response.body)
  .then(stream => ...)

完整教程

如果你仍然感到困惑,这里有一个有用的blog post如何使用这个一步一步。
希望这对你有帮助!

相关问题