使用 fetch 发送 json 数据为空 - Javascript

在使用 fetch 发送 json 数据时，有时我们可能会遇到空的响应。这可能是由于多种原因引起的，本文将介绍一些可能的原因及解决方法。

1. 请求本身就是空的

首先，我们需要确认请求本身是否就是空的。我们可以在浏览器开发者工具的 Network 面板中查看请求的响应体。如果响应体是空的，那么问题就出在请求本身上。

fetch('url', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({})
}).then(response => {
  console.log(response);
});

在这个例子中，我们向 url 发送了一个 POST 请求，请求体为空。如果响应体是空的，那么可能是服务端没有正确处理这个请求，我们需要检查服务端的代码。

2. 响应内容为空

如果请求的响应头中包含了 Content-Length: 0，那么说明响应内容是空的。我们可以在浏览器开发者工具的 Network 面板中查看请求的响应头。这种情况下，一般是服务端没有正确处理请求或者出现了异常。

fetch('url').then(response => {
  console.log(response);
});

在这个例子中，我们向 url 发送了一个 GET 请求。如果响应头中包含了 Content-Length: 0，那么说明响应内容是空的。

3. 响应状态码不对

如果响应状态码不是 200，那么说明请求没有成功。我们可以在浏览器开发者工具的 Network 面板中查看请求的响应状态码。

fetch('url').then(response => {
  console.log(response.status);
}).catch(error => {
  console.log(error);
});

在这个例子中，我们向 url 发送了一个 GET 请求。如果响应状态码不是 200，那么说明请求没有成功。

4. 响应头中的 Content-Type 不正确

如果响应头中的 Content-Type 不是 application/json，那么在使用 response.json() 解析响应体时就会出错。我们可以在浏览器开发者工具的 Network 面板中查看请求的响应头。

fetch('url').then(response => {
  if (response.headers.get('Content-Type') !== 'application/json') {
    throw new Error('响应头中的 Content-Type 不正确');
  }
  return response.json();
}).then(data => {
  console.log(data);
}).catch(error => {
  console.log(error);
});

在这个例子中，我们向 url 发送了一个 GET 请求，并使用 response.json() 解析响应体。如果响应头中的 Content-Type 不是 application/json，那么会抛出一个错误。