SyntaxError：“JSON.parse：JSON数据的第1行第1列的数据意外结束”在reactjs中使用Fetch答案

【问题标题】：SyntaxError: "JSON.parse: unexpected end of data at line 1 column 1 of the JSON data" on using Fetch in reactjsSyntaxError：“JSON.parse：JSON数据的第1行第1列的数据意外结束”在reactjs中使用Fetch
【发布时间】：2020-04-21 11:47:39
【问题描述】：

我在尝试从 Fetch API 检索 JSON 响应时遇到上述错误。出于某种原因，它适用于 4 个 API 中的 2 个，但不适用于其余 2 个。在检索响应时，前端代码没有任何区别。请看下面的代码：

我不确定这里有什么问题：

 async handleSubmit(event) {
    event.preventDefault();
    let responseArray = [];
    const token = localStorage.getItem("token");
    let url = "https://api_sports/api/developSports/?";
    var form = new FormData();
    form.append("destIds", this.state.destID);
    form.append("destInfo", this.state.infoID);
    form.append("destPostal", this.state.postID);

    // Figure out the way to append the data in form
    await fetch(url, {
      method: "POST",
      body: form,
      headers: { "Authorization": `Token ${token}` },
      "mimeType": "multipart/form-data",
    }).then((results) => {
      return results.json()
    }).then(response => {
      console.log("Actual Response: ", response)
      if (response.status === 204) {
        console.log("Response 204: ", response)
        this.setState({ alertMessage: "Success" })
      }
     else if (response.status === "error") {
        console.log("Expected Error : ", response);
        responseArray.push(response.messages);
        this.setState({
            alertMessage: "IPError",
            rangeArray: responseArray[0]
        });
    }
    })
    .catch(err => {
      console.log("Error ", err);
    })
  }

谢谢！

【问题讨论】：

您是否验证过 API 确实返回了您所期望的结果？
是的，API 正在返回 204 状态，这意味着成功，但 204 - 是 HTTP 响应。有什么方法可以同时检查 HTTP 和 JSON 响应吗？
我指的是实际内容。也许尝试使用response.text() 来查看它。我猜是服务器配置错误，而您实际上收到的是 HTML 错误页面。
出于某种原因，在尝试 text() 方法时，它不会在成功响应中显示任何内容。此外，后端 API 响应看起来不错： return JsonResponse({'status': 'success'}, status=204)
上述代码是否与 API 运行在同一个域中？如果没有，API 是否设置了正确的 CORS 标头？

标签： json reactjs post fetch

【解决方案1】：

请检查一次您的 API 响应，因为您的 API 未返回 JSON 对象，这就是您收到此错误的原因。响应可能是格式错误的 JSON。

【讨论】：

API 响应对我来说似乎很好，因为它也以相同的方式构建其他状态代码并且它们工作，除了 204 return JsonResponse({'status': 'error', 'messages': message}, status=550) -- 工作返回 JsonResponse({'status': 'success'}, status=204) --json.parse() 错误

【解决方案2】：

我可以通过添加以下代码来解决这个问题，将响应分成两部分（HTTP 和 JSON）

await fetch(url, {
      method: "POST",
      body: form,
      headers: { "Authorization": `Token ${token}` },
      "mimeType": "multipart/form-data",
    }).then((results) => {
      if (results.status === 204) {
        this.setState({ alertMessage: "Success" })
      }
      else {
        return results.json()
          .then(response => {
            if (response.status === "error") {
              responseArray.push(response.messages);
              this.setState({
                alertMessage: "Failure",
                rangeArray: responseArray[0]
              });
            }
          });
      }
    })

谢谢大家！

【讨论】：