在前端开发中，我们经常需要从后端服务器获取数据并将其呈现给用户。通常情况下，我们使用 XMLHttpRequest 或 fetch API 来发送 HTTP 请求。然而，在某些情况下，我们可能会遇到一个常见的错误 - 将循环结构转换为 JSON。
问题描述
当我们向服务器发送一个包含循环结构的请求时，例如：
const items = ['item1', 'item2', 'item3'];
fetch('/api/items', {
method: 'POST',
body: JSON.stringify({ items }),
headers: {
'Content-Type': 'application/json'
}
})如果服务器返回的数据类型不是 JSON，或者无法正确解析 JSON，则会出现以下错误：
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
这个错误提示非常晦涩难懂，但它实际上是在告诉我们，尝试将一个 XML 或 HTML 响应解析为 JSON 格式时失败了。
解决方案
要解决这个问题，我们需要确保服务器返回正确的 JSON 数据格式。最好的方法是在服务器端进行修改以确保数据格式正确，但如果无法修改服务器代码，则可以通过在客户端进行适当的处理来解决问题。
检查响应数据类型
首先，我们可以检查服务器返回的响应数据类型是否为 JSON。可以通过检查响应的 Content-Type 标头来确定响应类型，并据此将响应解析为相应的数据格式。
-- -------------------- ---- -------
-------------------
-------------- -- -
----- ----------- - -------------------------------------
-- ------------ -- ----------------------------------------- -
------ ----------------
- ---- -
----- --- ------------------- ---- -------- ---- ---------
-
--处理非 JSON 数据
如果服务器返回的不是 JSON 数据，则我们可以尝试手动解析该数据。以下是一个示例，演示了如何将 XML 数据转换为 JSON 格式：
-- -------------------- ---- -------
----------------------
-------------- -- ----------------
---------- -- -
----- ------ - --- ------------
----- --- - ---------------------------- -------------------
----- ---------- - -------------------------------
------ -----------------------
---
-------- -------------- -
----- --- - ---
-- ------------- --- -- -
-- ---------------------- - -- -
------------------ - ---
--- ---- - - -- - - ---------------------- ---- -
----- --------- - -----------------------
-------------------------------------- - --------------------
-
-
- ---- -- ------------- --- -- -
------------ - --------------
-
-- --------------------- -
--- ---- - - -- - - ---------------------- ---- -
----- ---- - -----------------------
----- -------- - --------------
-- ------- ------------- --- ------------ -
------------- - ----------------
- ---- -
-- ------- ------------------ --- ------------ -
----- --- - --------------
------------- - ---
------------------------
-
------------------------------------
-
-
-
------ ----
-序列化复杂数据
如果无法修改服务器代码并且服务器返回的数据包含循环结构，则我们可以尝试将这些数据序列化为字符串，并在客户端再次进行解析。以下是一个示例，演示了如何将包含循环结构的数据序列化为字符串：
const items = ['item1', 'item2', 'item3'];
fetch('/api/items', {
method: 'POST',
body: JSON.stringify({ items: JSON.stringify(items) }),
headers: {
'Content-Type': 'application/json'
}
})在服务器端，我们需要使用相应的反序列化方法将数据解析回原始格式。以下
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8539
