Question

每次尝试在API中使用POST方法时，都会收到此错误。

SyntaxError: Unexpected end of JSON input at fetch.then.response

当我使用GET方法时，可以正常获取数据。这是代码：

const teste = () => {
fetch("myURL/test", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        id: 1,
        name: "Teste",
        amount: 1,
        value: 3
    })
})
.then(response => response.json()) //Here is the error
.then(data => {
    console.log(data);
})
.catch((err)=>console.log(err))}

有人可以帮助我吗？谢谢。

编辑：我只是添加以下行以查看日志：

.then(response => console.log(response))

这就是我得到的：

Response {
type: "cors",
url: "myURL/test",
redirected: false,
status: 201,
ok: true,
…}
body: (...)
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 201
statusText: ""
type: "cors"
: "myURL/test"
__proto__: Response

Answer 1

这意味着在myURL/test处获取的页面不会以JSON内容或格式错误的JSON内容进行响应。这不是脚本中的错误，没关系，这是服务器中的错误，该服务器不在myURL/test上提供JSON内容。

此外，请注意，服务器可能对相同URL的GET请求和POST请求的响应不同！如果您从GET请求中获取有效的JSON，但如上所述，则无法从POST请求中获取有效的JSON，则服务器可能会根据请求类型提供不同的内容。对此进行调查。

调试提示

将then(resp => resp.json())替换为then(resp => resp.text()).then(console.log)，以查看所提供内容的样子
使用Postman模拟API调用，并查看提供的内容，以及更多详细信息
使用开发人员工具检查响应：
1. 在Chrome中
2. 打开控制台（F12）
3. 转到network标签
4. 通过myURL/test单击文件服务器
5. 单击response：这将是文本内容。应该使用正确格式的JSON。

Answer 2

基本上，GET方法不会将您的正文对象发送到您在其中获得响应的服务器。仅POST操作会将您的身体对象发送到服务器。

我认为您要发送的对象是问题。尝试连接的服务器不希望主体对象为字符串，或者应确保在处理之前正确解析了JSON。

Answer 3

看起来像您正在调用的API，在此特定的POST上没有响应正文。然后，当您调用response.json()（将response.body转换为json）时，它会出错。也许响应是body不是有效的json正文。

如果您想以更时尚的方式处理此错误，可以这样：

tryGetJson = async (resp) => {
    return new Promise((resolve) => {
      if (resp) {
        resp.json().then(json => resolve(json)).catch(() => resolve(null))
      } else {
        resolve(null)
      }
    })
  }

https://github.com/github/fetch/issues/268#issuecomment-399497478

Answer 4

（适用于晚来但要处理这个问题的人）

问题很可能是服务器错误或无效的 URL，但您看不到它，因为互联网上如何使用 fetch 的所有示例都缺少一个重要部分 - 服务器或网络故障。

我认为处理 fetch 的正确方法是在转换为 json 之前测试响应是否包含错误。

在测试 then 的示例中检查第一个 it.ok 的部分：

async function fetchData() {
    return await fetch('https://your-server.com/some-NOt-existing-url/')
        .then(it => {
            if (!it.ok) {
                throw `Server error: [${it.status}] [${it.statusText}] [${it.url}]`;
            }
            return it.json();
        })
        .then(receivedJson => {
            // your code with json here...
        })
        .catch(err => {
            console.debug("Error in fetch", err);
            setErrors(err)
        });
}

（注意：it 只是从 Kotlin 借来的命名约定，它使 JavaScript 代码更短。它是表达式左侧任何内容的别名，因此在本例中为 response）< /em>

错误：语法错误：fetch.then.response的JSON输入意外结束

4 个答案:

调试提示