我试图在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);
});
我可能在这两种方法上都做错了,所以很少有指导可以帮助我或其他人。或者我可能需要找到一种方法来做它的原生写一个桥梁。
1条答案
按热度按时间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规范中的一些空白,即对文本流的支持。
下面是如何使用它:
安装
这些简洁的步骤是经过数小时的调试而得来的,我不想浪费您的时间。
现在安装polyfills:
将polyfill与fetch一起使用:
将以下代码添加到应用入口文件index.js的顶部,该文件位于项目的根目录下。现在,您的新Fetch可在全球范围内使用。
现在您可以像正常的浏览器获取一样使用流对象。确保指定选项
textStreaming
true。完整教程
如果你仍然感到困惑,这里有一个有用的blog post如何使用这个一步一步。
希望这对你有帮助!