react-native - react native /博览会 : fetch throws "Network request failed" error on 401 response with formData content type

Question

我正在创建一个与 Django Rest Framework 后端交互的 expo 应用程序。我使用 fetch 获取数据并将其发布到我的服务器，并设置 JWT 身份验证。 Fetch 的工作方式与我期望的一样，它将 json 数据发送到我的服务器。

我还尝试将一些图像发布到我的服务器，这会按预期工作，直到我的 token 过期并且服务器返回 401。当在 Android 上发生这种情况时，请获取而不是正确解析并获得 401 的 response.status ，而是抛出 TypeError: Network request failed。在 iOS 上它只是挂起。

示例代码:

const formData = new FormData()
photos.map((photo, index) =>
  formData.append('images', {
    name: `test${index}.jpg`,
    type: 'image/jpeg',
    uri: photo.uri,
  }),
)
try {
  const response = await fetch(url, {
    body: formData,
    headers: {
      Authorization: `Bearer ${userToken}`,
    },
    method: 'POST'
  })
} catch (e) {
  console.log(e)
}

当我的服务器返回 200 或 401 时，Fetch 通常可以正确解析，但是当我发布图像数据时，200 秒解析成功，但 401 秒导致 fetch 抛出网络请求失败错误。我该如何阻止这种情况发生？

编辑:进一步的研究表明，Python 代码行 images = request.FILES.getlist('images', []) 对于避免出现此错误至关重要。如果我在这行代码之前手动返回，那么我会遇到同样的问题。我的猜测是，这与分段上传被错误中断有关，但我不确定如何在应用程序中处理此问题。

Answer 1

这里是我的简单代码 FormData 和 React-native，用于使用字符串和图像发布请求。

我使用了图像选择器。

你能切换标题吗？

let formdata = new FormData();

...

fetch('http://192.168.0.1/test',{
  method: 'post',
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  body: formdata
  }).then(response => {
    alert("sucess")
  }).catch(err => {
    console.log(err)
  })  
});