react-native-blob-util 和 fetch 的行为不一致
我正在尝试调用一个 API,该 API 获取图像和一些数据并返回 json。我正在使用 react-native-blob-util 进行 fetch。问题是,相同的代码有时可以工作,但在下一次尝试中失败 - 几乎每个备用请求都没有提交数据。
为了重现该问题,我创建了以下代码。它需要**相同的**图像文件和参数来发出获取请求。 (我正在 android 上测试)
调用 fetch 函数的按钮:
<TouchableOpacity
style={styles.btn}
onPress={() => {
MatchFace();
}}
>
<Text style={styles.btnText}>
Call API
</Text>
</TouchableOpacity>
然后这是调用 API 的函数:
const MatchFace = async () => {
setData([]);
ReactNativeBlobUtil.fetch(
'POST',
'url_for_the_api',
{
'Content-Type': 'multipart/form-data',
'Api-Key': 'api_key',
},[
{ name : 'image', filename : 'profile.jpg', type:'image/jpg', data: ReactNativeBlobUtil.wrap(decodeURIComponent('file:///storage/emulated/0/Download/profile.JPG'))},
{ name : 'album_id', data : '2'},
]
)
.then((response) => response.json())
.then((json) => setData(json))
.catch((error) => console.error(error))
.finally(() => console.log(data));
}
日志的一部分
**No response case**
G:\react-native\FaceAttendance\Screens\stackOverFlow.js:52 []
**Case where I get response**
G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:173 Stream Closed
registerWarning @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:173
console.warn @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:71
overrideMethod @ G:\react-native\FaceAttendance\node_modules\react-devtools-core\dist\backend.js:2171
(anonymous) @ G:\react-native\FaceAttendance\node_modules\react-native-blob-util\fetch.js:15
emit @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\vendor\emitter\_EventEmitter.js:149
__callFunction @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:419
(anonymous) @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:116
__guard @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:370
callFunctionReturnFlushedQueue @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:115
(anonymous) @ RNDebuggerWorker.js:2
G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:173 Stream Closed
registerWarning @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:173
console.warn @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:71
overrideMethod @ G:\react-native\FaceAttendance\node_modules\react-devtools-core\dist\backend.js:2171
(anonymous) @ G:\react-native\FaceAttendance\node_modules\react-native-blob-util\fetch.js:15
emit @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\vendor\emitter\_EventEmitter.js:149
__callFunction @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:419
(anonymous) @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:116
__guard @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:370
callFunctionReturnFlushedQueue @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:115
(anonymous) @ RNDebuggerWorker.js:2
G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\ExceptionsManager.js:149 Error: unexpected end of stream
at G:\react-native\FaceAttendance\node_modules\react-native-blob-util\fetch.js:256
at MessageQueue.__invokeCallback (G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:465)
at G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:127
at MessageQueue.__guard (G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:370)
at MessageQueue.invokeCallbackAndReturnFlushedQueue (G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:126)
at RNDebuggerWorker.js:2
reactConsoleErrorHandler @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\ExceptionsManager.js:149
registerError @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:204
console.error @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:67
overrideMethod @ G:\react-native\FaceAttendance\node_modules\react-devtools-core\dist\backend.js:2171
eval @ G:\react-native\FaceAttendance\Screens\stackOverFlow.js:51
tryCallOne @ G:\react-native\FaceAttendance\node_modules\promise\setimmediate\core.js:37
(anonymous) @ G:\react-native\FaceAttendance\node_modules\promise\setimmediate\core.js:123
(anonymous) @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:248
_callTimer @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:112
_callReactNativeMicrotasksPass @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:166
callReactNativeMicrotasks @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:418
__callReactNativeMicrotasks @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:393
(anonymous) @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135
__guard @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:370
flushedQueue @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134
invokeCallbackAndReturnFlushedQueue @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:130
(anonymous) @ RNDebuggerWorker.js:2
G:\react-native\FaceAttendance\Screens\stackOverFlow.js:52 {num_faces: 1, num_recognized_faces: 1, num_unknown_faces: 0, recognized_faces: Array(1), unknown_faces: Array(0)}
我确信 API 执行正确(在 React、PHP 和 Postman 上的测试应用程序中进行了测试)。我可能对反应本机文件系统做错了什么。
哦,还有一个输入 - 我的应用程序需要在应用程序运行时每隔几秒调用此 API。
I'm trying to call an API that takes an image and some data and returns json. I'm using react-native-blob-util with fetch. Problem is, the same code is working sometimes but failing in the next attempt - almost every alternate request is not submitting the data.
For replicating the issue, I have created the following code. It takes the **same** image file and parameters to make a fetch request.
(I am testing on android)
A button to call fetch function:
<TouchableOpacity
style={styles.btn}
onPress={() => {
MatchFace();
}}
>
<Text style={styles.btnText}>
Call API
</Text>
</TouchableOpacity>
And then this is the function that calls API:
const MatchFace = async () => {
setData([]);
ReactNativeBlobUtil.fetch(
'POST',
'url_for_the_api',
{
'Content-Type': 'multipart/form-data',
'Api-Key': 'api_key',
},[
{ name : 'image', filename : 'profile.jpg', type:'image/jpg', data: ReactNativeBlobUtil.wrap(decodeURIComponent('file:///storage/emulated/0/Download/profile.JPG'))},
{ name : 'album_id', data : '2'},
]
)
.then((response) => response.json())
.then((json) => setData(json))
.catch((error) => console.error(error))
.finally(() => console.log(data));
}
Part of log
**No response case**
G:\react-native\FaceAttendance\Screens\stackOverFlow.js:52 []
**Case where I get response**
G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:173 Stream Closed
registerWarning @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:173
console.warn @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:71
overrideMethod @ G:\react-native\FaceAttendance\node_modules\react-devtools-core\dist\backend.js:2171
(anonymous) @ G:\react-native\FaceAttendance\node_modules\react-native-blob-util\fetch.js:15
emit @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\vendor\emitter\_EventEmitter.js:149
__callFunction @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:419
(anonymous) @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:116
__guard @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:370
callFunctionReturnFlushedQueue @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:115
(anonymous) @ RNDebuggerWorker.js:2
G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:173 Stream Closed
registerWarning @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:173
console.warn @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:71
overrideMethod @ G:\react-native\FaceAttendance\node_modules\react-devtools-core\dist\backend.js:2171
(anonymous) @ G:\react-native\FaceAttendance\node_modules\react-native-blob-util\fetch.js:15
emit @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\vendor\emitter\_EventEmitter.js:149
__callFunction @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:419
(anonymous) @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:116
__guard @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:370
callFunctionReturnFlushedQueue @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:115
(anonymous) @ RNDebuggerWorker.js:2
G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\ExceptionsManager.js:149 Error: unexpected end of stream
at G:\react-native\FaceAttendance\node_modules\react-native-blob-util\fetch.js:256
at MessageQueue.__invokeCallback (G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:465)
at G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:127
at MessageQueue.__guard (G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:370)
at MessageQueue.invokeCallbackAndReturnFlushedQueue (G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:126)
at RNDebuggerWorker.js:2
reactConsoleErrorHandler @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\ExceptionsManager.js:149
registerError @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:204
console.error @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\LogBox\LogBox.js:67
overrideMethod @ G:\react-native\FaceAttendance\node_modules\react-devtools-core\dist\backend.js:2171
eval @ G:\react-native\FaceAttendance\Screens\stackOverFlow.js:51
tryCallOne @ G:\react-native\FaceAttendance\node_modules\promise\setimmediate\core.js:37
(anonymous) @ G:\react-native\FaceAttendance\node_modules\promise\setimmediate\core.js:123
(anonymous) @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:248
_callTimer @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:112
_callReactNativeMicrotasksPass @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:166
callReactNativeMicrotasks @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:418
__callReactNativeMicrotasks @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:393
(anonymous) @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135
__guard @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:370
flushedQueue @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134
invokeCallbackAndReturnFlushedQueue @ G:\react-native\FaceAttendance\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:130
(anonymous) @ RNDebuggerWorker.js:2
G:\react-native\FaceAttendance\Screens\stackOverFlow.js:52 {num_faces: 1, num_recognized_faces: 1, num_unknown_faces: 0, recognized_faces: Array(1), unknown_faces: Array(0)}
I'm sure that API is performing correctly (tested from test apps on react, php and also postman). I'm possibly doing something wrong with the react-native filesytem.
Oh, one more input - my application needs to call this API in every few seconds when the app runs.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论