react-native-blob-util 和 fetch 的行为不一致

发布于 2025-01-18 14:59:21 字数 6541 浏览 0 评论 0原文

我正在尝试调用一个 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文