首页 > 解决方案 > Expo json意外的输入结束

问题描述

我有一个非常简单的 javascript 发送一个 post 命令。正如预期的那样,我从 fetch 命令中得到了一个承诺,但是当我尝试使用该承诺时,response.json()我在下面指示的行中得到了一个 Unexpected end of input Syntax Error。使用response.text()和其他各种方法时我没有遇到任何问题,它似乎只是.json()破坏了一些东西。我正在使用 React Native,同样的代码在 Node.js 上运行良好。

async function postData (url, data) {
  const params = {
    mode: 'no-cors',
    method: 'POST',
    headers:{
      Accept: 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  };
  let response = await fetch(url,params);
  var responseJson = await response.json();//This seems to be the problem
  return response;
}

这里还有一些可能有用的代码。

function postStuff() {
  var url = "http://192.4.20.69:1337";
  postData(url, data)
  .then(res => {
    console.log(res);
  });
}

export default function App() {
  console.log("App Executed");
  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <Text>Hello!!</Text>
      <Button
        title="Post"
        color={"#696969"}
        accessibilityLabel="Click to send message"
        onPress={postStuff}
      />
    </View>
  );
}

任何帮助弄清楚为什么.json()会破坏这一点将不胜感激。我想尝试坚持使用 fetch,但如果需要,我可以使用其他处理 json 的方法之一,但我想我可能仍然会遇到有关.json().

标签: javascriptjsonreact-nativepostasync-await

解决方案


问题可能在于服务器端响应。如果没有返回 json,response.json() 会失败。我建议您通过在 response.json() 周围添加 try catch 并在 catch 中打印 response.text() 来检查服务器响应。这也可能是由于您的响应缺少所需的标头内容类型并且 fetch 不知道如何解析它。所以你可以尝试做这样的事情

async function postData (url, data) {
  const params = {
    mode: 'no-cors',
    method: 'POST',
    headers:{
      Accept: 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  };
  let response = await fetch(url,params);
  try{
     return await response.json();//This seems to be the problem
   }catch(e){
    console.error(e);
    const textResponse = await response.text();
    return JSON.parse(textResponse)
  }
  return response;
}

另外我注意到您正在返回响应而不是 responseJson 这也可能是这里的问题


推荐阅读