为什么 React Native HTTP POST 不起作用？

Question

export const login = () => {
    return async (dispatch) => {
        try {
            const response = await fetch(
                `https://simplyrem.com/srwl/haib/index.php`,
                {
                    method: 'POST',
                    headers: {
                        accept: 'application/json',
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        auth: 'XCXCXCXCX',
                        usernamex: 'XXXXX',
                        passwordx: 'XXXXXXXX',
                    }),
                }
            )

            if (!response.ok) {
                const errorResData = await response.json()
                console.log(errorResData)

                throw new Error('Something went wrong!')
            }

            const responseData = await response.json()
            const userInfo = responseData

            console.log(userInfo)

            dispatch({
                type: LOGIN,
                userInfo: userInfo,
            })
        } catch (err) {
            throw err
        }
    }
}

大家好，

我在输入我的凭据时使用 insomnia 测试了这个 API，我收到了 JSON 响应，所以我知道这个 API 可以正常工作并且我的凭据是正确的。我是 React Native 的新手，我不知道我是否通过使用 body: JSON.stringify 正确添加了参数......显然，我已经用“X”替换了信息。在 swift 中，我也能够得到响应，但是当我尝试在 react-native 中重新创建 API 调用时出现错误

> [Unhandled promise rejection: SyntaxError: JSON Parse error: Unexpected EOF]
> * [native code]:null in parse
> - node_modules/react-native/node_modules/promise/setimmediate/core.js:37:13 in tryCallOne
> - node_modules/react-native/node_modules/promise/setimmediate/core.js:123:24 in setImmediate$argument_0
> - node_modules/react-native/Libraries/Core/Timers/JSTimers.js:130:14 in _callTimer
> - node_modules/react-native/Libraries/Core/Timers/JSTimers.js:181:14 in _callImmediatesPass
> - node_modules/react-native/Libraries/Core/Timers/JSTimers.js:441:30 in callImmediates
> - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:387:6 in __callImmediates
> - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:135:6 in  __guard$argument_0
> - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
> - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:134:4 in flushedQueue
> * [native code]:null in flushedQueue
> * [native code]:null in invokeCallbackAndReturnFlushedQueue >

Answer 1

JSON Parse error: Unexpected EOF 通常是

当您尝试将不可转换的 json 响应（如 Html 响应）转换为 json 时出错

为了安全起见，我通常先使用.then(res => res.text()) 将其转换为字符串，然后使用console.log() 或alert() 它来证明响应是否可以转换为json，而不显示react-native 的红框消息，

如果响应是有效的 json，您可以使用 JSON.parse(responseText) 自行转换

例子

fetch( "https://simplyrem.com/srwl/haib/index.php", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        Email: 'XXXXX',
        password: "xxxxx",
      }),
    })
      .then((response) => response.json())
      .then((responseJson) => {
        if (responseJson.IsSuccess) {
            console.log(responseJson);
            alert(responseJson)
        } else {
          console.log(responseJson.ErrorMessage);
          alert(responseJson.ErrorMessage)
        }
      })

      .catch((error) => {
        alert(error);
      });