使用Fetch获取newFile.dto文件内容如何转换为可循环遍历的数组格式

问题根因 #

你遇到的解析失败问题核心原因是newFile.dto文件内容属于JavaScript对象字面量数组，不符合标准JSON规范：

• 标准JSON要求所有对象键必须用双引号包裹
• 标准JSON的字符串值只能用双引号，不支持单引号
• 你之前遇到的末尾存在无效字符<报错，大概率是请求路径错误，服务端返回了404页面的HTML内容，导致解析JSON失败

方案1：修改为标准JSON格式（最优方案） #

把newFile.dto文件内容替换为标准JSON格式，之后直接用res.json()即可直接解析得到可遍历的数组，无需额外处理：

[
  {
    "id": 0,
    "img": "C:\\ReactProjects\\IMAGES\\DSC_0134.jpg",
    "test": "another column"
  },
  {
    "id": 1,
    "img": "C:\\ReactProjects\\IMAGES\\DSC_0135.jpg",
    "test": "another column 1"
  },
  {
    "id": 2,
    "img": "C:\\ReactProjects\\IMAGES\\DSC_0136.jpg",
    "test": "another column 2"
  },
  {
    "id": 3,
    "img": "C:\\ReactProjects\\IMAGES\\DSC_0137.jpg",
    "test": "another column 3"
  }
]

对应的请求代码可以简化为：

async function testFileRead() {
  // 路径开头加/确保从项目根路径请求public下的文件，避免相对路径出错
  const myArray = await fetch('/newFile.dto')
    .then(res => res.json())
  // 这里直接拿到可遍历的数组
  console.log(myArray)
  return myArray
}

方案2：不修改原文件，直接解析JS对象字面量 #

如果不能修改原.dto文件的内容，可以在拿到文本内容后，通过new Function动态执行得到JS数组，该方式比eval安全性更高，适合本地可控文件的场景：

async function testFileRead() {
  const myArray = await fetch('/newFile.dto', {
    headers: { 
      'Accept': 'text/plain'
    }
  })
  .then(res => res.text())
  .then(final => {
    // 去掉首尾多余的空白/换行符之后动态执行返回数组
    const cleanStr = final.trim()
    return new Function(`return ${cleanStr}`)()
  })
  // 这里得到的就是可遍历的数组
  console.log(myArray)
  return myArray
}

注意：该方法仅适用文件内容完全可控的场景，如果文件来源不可信，存在代码注入风险。

内容的提问来源于stack exchange，提问作者Datadump