json - axios 或 fetch 获取本地 json - 奇怪的响应格式和 JSON 中的 Unexpected token 然后我尝试解析它

Question

我的 axios 响应（或获取，都尝试了）它是纯文本（字符串）。但我期望 javaScript 映射。如果我尝试 JSON.parse()（或从 fetch .json()）我得到错误：

Uncaught (in promise) SyntaxError: Unexpected token in JSON at position 0 at JSON.parse () at eval (List.vue?8915:66)

• 无 BOM 的 UTF-8
• 我通过几个 json 验证器在线检查了我的 json - json 是有效的
• 我尝试通过一些在线 json 创建器创建我的 json - 同样的错误

所以我有几个问题：

1. 我认为json是一种特殊的格式。如果你通过 axios/fetch 得到它，你的响应总是 js map？这不是真的？
2. 创建和验证 json 以确保它没问题的最佳方法是什么？
3. 我使用 vue cli，没有 json 加载器（我想是的，不确定，它不使用 webpack，但我看不到一些加载器）。可能有问题？还是一些环境设置？我试图检查它，但可能找不到。
4. 或者也许 ma 标题仍然是错误的，ad accept 什么都不给我？

投票服务.ts

import axios, { AxiosResponse } from "axios";

export const getVotingsService = (): Promise<AxiosResponse> => {
    return axios
        .get("http://localhost:8080/fakeData/votings.json", {
            headers: {
                "accept": "application/json",
                'Content-Type': 'application/json'
            },
        })
};

列表.vue

...
  private getVotings() {
    getVotingsService().then(response => {
      console.log("resp", response.data); //string, data is ok
      console.log(JSON.parse(response.data)); //error
    });
  }
...

votes.json（在公共文件夹中）

{
    "votings": [
        {
            "createDate": "20-07-20",
            "deadline": "20-08-20",
            "status": "active",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        },
        {
            "createDate": "20-07-20",
            "deadline": "20-08-20",
            "status": "active",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        },
        {
            "createDate": "20-07-20",
            "deadline": "20-08-20",
            "status": "active",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        }
    ]
}

铬控制台：

铬网络响应：

铬网络标头：

标签： jsonvue.jsformatresponse

Answer 1

2020 年 8 月 20 日，Axios发布 v0.20.0，解决了在转换响应时删除字节顺序标记（UTF-8 BOM）的问题。