JSON.parse 方法是前端开发中常用的一个用于将字符串转换为 JSON 对象的方法，但在使用时往往会遇到一些意外性错误。
问题描述
当我们使用 JSON.parse 方法将一个非标准的 JSON 字符串转换成对象时，很容易会遇到以下错误：
Uncaught SyntaxError: Unexpected token < in JSON at position 0
这个错误通常出现在返回 HTML 或其他非 JSON 数据类型的 API 响应中，导致无法正常解析数据。下面是一个示例代码：
const response = await fetch('/api/data');
const data = JSON.parse(response);
console.log(data);当 API 返回的不是 JSON 数据时，上述代码就会抛出以上错误。
原因分析
造成该错误的原因是因为 JSON.parse 方法只能接受 JSON 格式的字符串作为参数，而传入了一个非 JSON 字符串。导致解析失败。
标准的 JSON 格式
一个标准的 JSON 格式需要满足以下要求：
- 必须使用双引号来表示键名和字符串值。
- 键名必须是唯一的。
- 对象和数组必须使用正确的格式进行嵌套。
- 数字、布尔值和 null 必须使用对应的字面量。
以下是一个符合标准的 JSON 示例：
-- -------------------- ---- -------
-
------- -----
------ ---
--------- -----
------------ -------------- ------ --------
---------- -
------- -----
--------- -----
--
-------------- ----
-非标准的 JSON 格式
当我们传入的字符串不符合标准的 JSON 格式时，就会引发解析错误。以下是一些可能导致错误的非标准 JSON 格式：
- 键名或字符串值使用单引号。
- 没有用双引号将键名或字符串值包裹起来。
- 没有用逗号分隔数组或对象中的元素。
- 数组或对象结束后多余的逗号。
以下是一个非标准的 JSON 示例：
-- -------------------- ---- -------
-
----- -----
---- ---
------- -----
---------- -------------- ------ --------
-------- -
----- ----- -- ------
------- -----
--
------------ -----
- -- -----解决方案
为了避免该错误的发生，我们需要确保传入的字符串满足标准的 JSON 格式。可以通过以下方式进行检查和修复：
- 可以使用 JSONLint 等在线工具进行格式检查。
- 如果无法修改响应数据的格式，可以尝试使用 try...catch 语句捕获异常并进行处理。
以下是一个使用 try...catch 处理解析错误的示例代码：
-- -------------------- ---- ------- ----- -------- - ----- ------------------- --- ----- --- - ---- - --------------------- - ----- ------- - ------------------- ------- ------- -- ---------------------- - ------------------
总结
在前端开发中，JSON.parse 方法是常用的方法之一，但需要注意传入的字符串必须满足标准的 JSON 格式。否则就会引发解析错误。如果无法修改响应数据的格式，可以尝试使用 try...catch 来捕获异常并进行处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10706